https://github.com/taskcluster/material-ui-json-schema-viewer
https://github.com/taskcluster/material-ui-json-schema-viewer
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/taskcluster/material-ui-json-schema-viewer
- Owner: taskcluster
- License: mpl-2.0
- Created: 2019-12-01T15:34:46.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-05T02:21:14.000Z (over 3 years ago)
- Last Synced: 2026-01-03T03:09:27.365Z (5 months ago)
- Language: JavaScript
- Homepage: https://taskcluster.github.io/material-ui-json-schema-viewer/?path=/story/schema-viewer--default-types
- Size: 9.35 MB
- Stars: 8
- Watchers: 5
- Forks: 9
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# material-ui-json-schema-viewer
a viewer component that displays JSON schemas (built using [material-ui](https://material-ui.com/))
## 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
```js
import SchemaViewer from 'material-ui-json-schema-viewer';
```
(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](https://material-ui.com/customization/default-theme/). You can change the theme by customizing the theme passed to
material-ui's [`ThemeProvider`](https://material-ui.com/styles/api/#themeprovider) component.
You may also use material-ui's [`CSSBaseline`](https://material-ui.com/api/css-baseline/) to provide a more consistent style baseline as well.
```js
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
},
});
```
## 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`