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