diff --git a/README.md b/README.md index cb16d05..5ebc10a 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ const Component = () => () | `src` | `JSON Object` | None | This property contains your input JSON | | `name` | `string` or `false` | "root" | Contains the name of your root node. Use `null` or `false` for no name. | | `theme` | `string` | "rjv-default" | RJV supports base-16 themes. Check out the list of supported themes [in the demo](https://mac-s-g.github.io/react-json-view/demo/dist/). A custom "rjv-default" theme applies by default. | +| `className` | `string` | `undefined` | Additional `className` string to append to the `className` of react-json-view's container. | | `style` | `object` | `{}` | Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme. | | `iconStyle` | `string` | "circle" | Style of expand/collapse icons. Accepted values are "circle", triangle" or "square". | | `indentWidth` | `integer` | 4 | Set the indent-width for nested objects | diff --git a/src/index.tsx b/src/index.tsx index 2ad2c05..d762900 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,21 +1,21 @@ import React from 'react' import { polyfill } from 'react-lifecycles-compat' + import JsonViewer from './components/JsonViewer' import AddKeyRequest from './components/ObjectKeyModal/AddKeyRequest' import ValidationFailure from './components/ValidationFailure' -import { toType, isTheme } from './helpers/util' +import { isTheme, toType } from './helpers/util' import ObjectAttributes from './stores/ObjectAttributes' - -//global theme +// global theme import Theme from './themes/getStyle' import type { ReactJsonViewProps } from './type' -//forward src through to JsonObject component +// forward src through to JsonObject component class ReactJsonView extends React.PureComponent { constructor (props: ReactJsonViewProps) { super(props) this.state = { - //listen to request to add/edit a key to an object + // listen to request to add/edit a key to an object addKeyRequest: false, editKeyRequest: false, validationFailure: false, @@ -31,10 +31,10 @@ class ReactJsonView extends React.PureComponent { } } - //reference id for this instance + // reference id for this instance rjvId = Date.now().toString() - //all acceptable props and default values + // all acceptable props and default values static defaultProps = { src: {}, name: 'root', @@ -91,7 +91,7 @@ class ReactJsonView extends React.PureComponent { // @ts-ignore ObjectAttributes.on(i + '-' + this.rjvId, listeners[i]) } - //reset key request to false once it's observed + // reset key request to false once it's observed this.setState({ addKeyRequest: false, editKeyRequest: false @@ -99,7 +99,7 @@ class ReactJsonView extends React.PureComponent { } override componentDidUpdate (prevProps: any, prevState: any) { - //reset key request to false once it's observed + // reset key request to false once it's observed if (prevState.addKeyRequest !== false) { this.setState({ addKeyRequest: false @@ -130,10 +130,11 @@ class ReactJsonView extends React.PureComponent { 'add-key-request': this.addKeyRequest } } - //make sure props are passed in as expected + + // make sure props are passed in as expected static validateState = (state: any) => { const validatedState = {} - //make sure theme is valid + // make sure theme is valid if (toType(state.theme) === 'object' && !isTheme(state.theme)) { console.error( 'react-json-view error:', @@ -143,7 +144,7 @@ class ReactJsonView extends React.PureComponent { // @ts-ignore validatedState.theme = 'rjv-default' } - //make sure `src` prop is valid + // make sure `src` prop is valid if (toType(state.src) !== 'object' && toType(state.src) !== 'array') { console.error( 'react-json-view error:', @@ -174,11 +175,11 @@ class ReactJsonView extends React.PureComponent { name } = this.state - const { style, defaultValue } = this.props + const { className, style, defaultValue } = this.props return (
@@ -212,7 +213,6 @@ class ReactJsonView extends React.PureComponent { namespace, new_value, existing_value, - variable_removed, updated_src, type } = ObjectAttributes.get(this.rjvId, 'action', 'variable-update') @@ -224,11 +224,11 @@ class ReactJsonView extends React.PureComponent { const on_edit_payload = { existing_src: src, - new_value: new_value, - updated_src: updated_src, - name: name, - namespace: namespace, - existing_value: existing_value + new_value, + updated_src, + name, + namespace, + existing_value } switch (type) { diff --git a/src/type.d.ts b/src/type.d.ts index f8e894e..da7d92c 100644 --- a/src/type.d.ts +++ b/src/type.d.ts @@ -1,4 +1,4 @@ -import * as React from 'react'; +import * as React from 'react' export interface ReactJsonViewProps { /** @@ -20,6 +20,13 @@ export interface ReactJsonViewProps { * Default: "rjv-default" */ theme?: ThemeKeys | ThemeObject; + + /** + * Additional `className` string to append to the `className` of react-json-view's container. + * + * @default undefined + */ + className?: string /** * Style attributes for react-json-view container. * Explicit style attributes will override attributes provided by a theme. @@ -285,5 +292,5 @@ export type ThemeKeys = | 'tube' | 'twilight'; -declare const JsonViewer: React.ComponentType; -export default JsonViewer; +declare const JsonViewer: React.ComponentType +export default JsonViewer