Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/himself65/rich-data
Data Viewer
https://github.com/himself65/rich-data
react typescript
Last synced: 2 days ago
JSON representation
Data Viewer
- Host: GitHub
- URL: https://github.com/himself65/rich-data
- Owner: himself65
- License: mpl-2.0
- Created: 2023-01-03T02:12:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-17T01:37:03.000Z (12 months ago)
- Last Synced: 2024-08-10T09:13:28.999Z (about 2 months ago)
- Topics: react, typescript
- Language: TypeScript
- Homepage: https://rich-data.dev
- Size: 4.2 MB
- Stars: 147
- Watchers: 1
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rich Data
> v3 version is heavily under development. Please use v2 as the current stable version.
[](https://www.npmjs.com/package/@rich-data/viewer)
[](https://www.npmjs.com/package/@rich-data/viewer)
[](https://bundlephobia.com/package/@rich-data/viewer@nightly)
> 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](https://rich-data.dev/) 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.
```tsx
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`.
```tsx
const TestPlugin = defineMiddleware({
id: 'my-plugin',
middleware: (_store) => {
return {
ping: () => {
console.log('ping')
}
}
}
})
const data = {/* your data here */}
const Component = () => {
const context = useContext()
return (
<>
context.ping()}>
Ping
>
)
}
const App = () => {
return (
)
}
```
Or you can render your own data structure as you like,
by using a `defineBlock` helper function.
```tsx
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 (
)
}
)
```
## Ecosystem
Rich Data provides a number of builtin plugins.
### JSON
```tsx
import { createJsonPlugins } from '@rich-data/json-plugin'
const {
Viewer,
useContext,
Provider,
} = createViewerHook({
plugins: [
...createJsonPlugins()
]
})
```
### JSX (🚧)
### `Y.Doc` (🚧)
## LICENSE
The MPL 2.0 License