Index

Rich Data

@rich-data/viewer

@rich-data/viewer is a React component that inspects a rich data object.

You can use it to inspects a JSON object, a JSX element, or a Yjs Document or any other data structure that you want.

Usage

{
  • number:114514
  • hello:string"world"
  • array:{
    • 0:1
    • 1:2
    • 2:3
    • 3:4
    • 4:5
    }
}
import { createViewerHook } from '@rich-data/viewer';
import { createJsonPlugins } from '@rich-data/json-plugin';
 
const {
  Viewer,
  Provider,
} = createViewerHook({
  plugins: [
    ...createJsonPlugins(),
  ]
})
 
export const App = () => {
  return (
    <>
      <Provider>
        <Viewer value={/* your data here */}/>
      </Provider>
    </>
  )
}

@rich-data/color-palette-plugin

{
  • palette:{
    • primary:{
      • light:
        #757ce8
      • main:
        #3f50b5
      • dark:
        #002884
      • contrastText:
        #fff
      }
    • secondary:{
      • light:
        #ff7961
      • main:
        #f44336
      • dark:
        #ba000d
      • contrastText:
        #000
      }
    }
}
import { createColorPaletteBlock } from '@rich-data/color-palette-plugin'
 
const { Viewer, Provider } = createViewerHook({
  plugins: [
    createColorPaletteBlock()
    // ...
  ]
})