Negotiable Paleobotanist Missions

    material-ui-json-schema-viewer

    2.0.0 • Public • Published

    material-ui-json-schema-viewer

    a viewer component that displays JSON schemas (built using material-ui)

    Requirements

    • @material-ui/core v4+
    • react 16.8+
    • react-dom 16.8+

    Usage

    Install package

    npm i material-ui-json-schema-viewer
    

    Import package and use component

    import SchemaViewer from 'material-ui-json-schema-viewer';
    
    <SchemaViewer schema={jsonSchema} references={schemaReferences} />

    (Named import, import { SchemaViewer } from .., is also supported)

    Prop Type Required Description
    schema Object A JSON schema object.
    references Array - An array of JSON schema objects (including the schema to render), which the schema may refer to. (each schema within the references must include an $id property to use for key-value mapping the references)

    Theme Customization

    By default, the schema viewer inherits material-ui's default theme. You can change the theme by customizing the theme passed to material-ui's ThemeProvider component. You may also use material-ui's CSSBaseline to provide a more consistent style baseline as well.

    const customTheme = createMuiTheme({
        palette: {
          background: {
            paper: '#000', // change the background color
          },
          text: {
            primary: '#ffc107', // change the text color
            secondary: '#ffc53d', // change chip's border color
            hint: '#ddd', // change comment color
            disabled: '#808080', // change markdown code block color
          },
          divider: '#4f4f4f', // change table's border color
        },
    });
    <CssBaseline />
    <ThemeProvider theme={customTheme}>
        <SchemaViewer />
    </ThemeProvider>

    Contributing

    This repository uses Neutrino for developing, and building React components. To get started:

    • Fork and clone this repo.
    • Install the dependencies with yarn.
    • Start the storybook server with yarn start (use CTRL-C to exit).

    Feel free to open an issue, submit a pull request, or contribute however you would like. Understand that this documentation is still a work in progress, so file an issue or submit a PR to ask questions or make improvements. Thanks!

    Publishing

    1. Bump the version of the package with npm version {version-name} (patch, minor, major, etc.).
    2. Generate the compiled component for publishing to npm with yarn build.
    3. Publish the package with npm publish
    4. Push your changes with git push upstream main --tags
    5. Deploy Storybook to gh-pages with yarn deploy

    Keywords

    none

    Install

    npm i material-ui-json-schema-viewer

    DownloadsWeekly Downloads

    47

    Version

    2.0.0

    License

    MPL-2.0

    Unpacked Size

    515 kB

    Total Files

    35

    Last publish

    Collaborators

    • djmitche
    • helfi92
    • jiwoonkim