fundon / rich-data

Data Viewer

Rich Data

v3 version is on heavy development. Please use v2 for stable version.

Rich Data provides a powerful and flexible way to display data in your React.

• Minimal core (3Kb), full featured (20Kb)
• Rich data structure preview support (object, JSON, JSX, Y.Doc...)
• React 18 Suspense
• Headless UI
• Customizable UI / Logic
• 100% Strong typed

Core Concept

Viewer

The Viewer component is the core of Rich Data. It is a React component that can render any data structure you provider.

const {
  Viewer,
  useContext,
  Provider,
} = createViewerHook({
  plugins: [
    // ...
  ]
})

Plugin

Plugin is the basic unit of Viewer. Which connect the viewer between data structure, UI, and logic.

You can inject function into whole Viewer by using middleware.

const TestPlugin = defineMiddleware({
  id: 'my-plugin',
  middleware: (_store) => {
    return {
      ping: () => {
        console.log('ping')
      }
    }
  }
})

const data = {/* your data here */}

const Component = () => {
  const context = useContext()

  return (
    <>
      <button onClick={() => context.ping()}>
        Ping
      </button>
      <Viewer
        data={data}
      />
    </>
  )
}

const App = () => {
  return (
    <Provider>
      <Component />
    </Provider>
  )
}

Or you can render your own data structure you like, by using defineBlock helper function.

const MyImageBlock = defineBlock(
  'my_image',
  (value): value is string => value.startsWith('http'),
  function MyImage ({ value }) {
    const { data } = useSWR(value, {
      fetcher: url => fetch(url).then(res => res.blob()),
      suspense: true
    })
    const url = data ? URL.createObjectURL(data) : ''
    return (
      <img alt={value} height={50} width={50} src={url}/>
    )
  }
)

Ecosystem

We builtin some basic plugins for you to use.

JSON

import { createJsonPlugins } from '@rich-data/json-plugin'

const {
  Viewer,
  useContext,
  Provider,
} = createViewerHook({
  plugins: [
    ...createJsonPlugins()
  ]
})

JSX (🚧)

Y.Doc (🚧)

LICENSE

The MPL 2.0 License