@rich-data/viewer
v2.15.6 react-18 react react-json react-json-viewer array-viewer component interactive interactive-json json and 11 more...
Rich Data
v3 version is heavily under development. Please use v2 as the current stable version.
Rich Data provides a powerful and flexible way to display "raw" data in your React UI.
- Minimal core (3Kb), full featured (20Kb)
- Rich data structure preview support (object, JSON, JSX,
Y.Doc
...) - Supports React 18 Suspense
- Offers a "headless UI"
- Customizable UI / Logic
- 100% Strongly typed
Demos and Examples
See the rich-data.dev website for running demos and code examples.
Core Concepts
Viewer
The Viewer
component is the core of Rich Data.
It is a React component that can render any data structure you provide.
const {
Viewer,
useContext,
Provider,
} = createViewerHook({
plugins: [
// ...
]
})
Plugin
Plugin is the basic unit of Rich Data that connects the Viewer to your data structure, applying UI and logic.
You can inject arbitrary functionality into the 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 as you like,
by using a 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
Rich Data provides a number of builtin plugins.
JSON
import { createJsonPlugins } from '@rich-data/json-plugin'
const {
Viewer,
useContext,
Provider,
} = createViewerHook({
plugins: [
...createJsonPlugins()
]
})
JSX (🚧)
Y.Doc
(🚧)
LICENSE
The MPL 2.0 License
npm i @rich-data/[email protected]
Metadata
- MIT
- Whatever
- Unknown
- released 3/27/2023