|  | 
|  | 1 | +# <JSONEditor> and <JSONEView> | 
|  | 2 | + | 
|  | 3 | +JSON edit and view components for [react-admin](https://github.com/marmelab/react-admin) using [JSONInput](https://github.com/AndrewRedican/react-json-editor-ajrm). | 
|  | 4 | + | 
|  | 5 | +## Installing Dependency | 
|  | 6 | + | 
|  | 7 | +Using node package manager: | 
|  | 8 | + | 
|  | 9 | +```bash | 
|  | 10 | +$ npm i --save ra-input-json | 
|  | 11 | +``` | 
|  | 12 | + | 
|  | 13 | +## Usage | 
|  | 14 | + | 
|  | 15 | +```python | 
|  | 16 | +import { JSONEditor, JSONEView } from 'ra-input-json'; | 
|  | 17 | + | 
|  | 18 | +In List component use JSONEView component. | 
|  | 19 | +#Example: | 
|  | 20 | +<JSONEView source="your source name" label="your label name"/> | 
|  | 21 | + | 
|  | 22 | +In Form component such as SimpleForm use JSONEditor component. | 
|  | 23 | +#Example: | 
|  | 24 | +<JSONEView source="your source name" label="your label name"/> | 
|  | 25 | +``` | 
|  | 26 | +## Component Properties | 
|  | 27 | + | 
|  | 28 | +**source** -  Property name of your entity to view/edit. This attribute is *required*. | 
|  | 29 | + | 
|  | 30 | +**viewOnly** - Send true if you would like for content shown not to be editable. *boolean. Optional. Always in JSONEView!* | 
|  | 31 | + | 
|  | 32 | +**confirmGood** - 	Send false if you would like for the checkmark to confirm good syntax to be hidden. boolean. Optional. | 
|  | 33 | + | 
|  | 34 | +**height** - A shorthand property to set a specific height for the entire component. *string. Optional.* | 
|  | 35 | + | 
|  | 36 | +**width** - A shorthand property to set a specific width for the entire component. *string. Optional.* | 
|  | 37 | + | 
|  | 38 | +**modifyErrorText** - A custom function to modify the component's original warning text. This function will receive a single parameter of type string and must equally return a string. *function. Optional.* | 
|  | 39 | + | 
|  | 40 | +**theme** - Specify which built-in [theme](https://github.com/AndrewRedican/react-json-editor-ajrm/wiki/Built-In-Themes) to use. *string. Optional.* | 
|  | 41 | + | 
|  | 42 | +**colors** - Contains the following properties: *object	Optional* | 
|  | 43 | + | 
|  | 44 | +**colors.default** - Hex color code for any symbols, like curly braces, and comma. *string. Optional* | 
|  | 45 | + | 
|  | 46 | +**colors.string** - Hex color code for tokens identified as string values. *string. Optional* | 
|  | 47 | + | 
|  | 48 | +**colors.number** - Hex color code for tokens identified as integeter, double, or float values. *string. Optional* | 
|  | 49 | + | 
|  | 50 | +**colors.colon** - Hex color code for tokens identified as colon. *string. Optional* | 
|  | 51 | + | 
|  | 52 | +**colors.keys** - Hex color code for tokens identified as keys or property names. *string. Optional* | 
|  | 53 | + | 
|  | 54 | +**colors.keys_whiteSpace** - Hex color code for tokens identified as keys wrapped in quotes. *string. Optional* | 
|  | 55 | + | 
|  | 56 | +**colors.primitive** - Hex color code for tokens identified as boolean values and null. *string. Optional* | 
|  | 57 | + | 
|  | 58 | +**colors.error** - Hex color code for tokens marked with an error tag. *string. Optional* | 
|  | 59 | + | 
|  | 60 | +**colors.background** - Hex color code for component's background. *string. Optional* | 
|  | 61 | + | 
|  | 62 | +**colors.background_warning** - Hex color code for warning message displaying at the top in component. *string. Optional* | 
|  | 63 | + | 
|  | 64 | +**style** - Contains the following properties: *object.	Optional* | 
|  | 65 | + | 
|  | 66 | +**style.outerBox** - Property to modify the default style of the outside container div of component. *object. Optional* | 
|  | 67 | + | 
|  | 68 | +**style.container** - Property to modify the default style of the container of component. *object. Optional* | 
|  | 69 | + | 
|  | 70 | +**style.warningBox** - Property to modify the default style of the container div of the warning message. *object. Optional* | 
|  | 71 | + | 
|  | 72 | +**style.errorMessage** - Property to modify the default style of the warning message. *object. Optional* | 
|  | 73 | + | 
|  | 74 | +**style.body** - Property to modify the default style of the container div of row labels and code. *object. Optional* | 
|  | 75 | + | 
|  | 76 | +**style.labelColumn** - Property to modify the default style of the container div of row labels. *object. Optional* | 
|  | 77 | + | 
|  | 78 | +**style.labels** - Property to modify the default style of each row label. *object. Optional* | 
|  | 79 | + | 
|  | 80 | +**style.contentBox** - Property to modify the default style of the container div of the code. *object. Optional* | 
|  | 81 | + | 
|  | 82 | + | 
|  | 83 | +## Contributing | 
|  | 84 | +Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. | 
|  | 85 | + | 
|  | 86 | +Please make sure to update tests as appropriate. | 
|  | 87 | + | 
|  | 88 | +## License | 
|  | 89 | +[MIT](https://choosealicense.com/licenses/mit/) | 
0 commit comments