This would let you control if the user is allowed to remove the existing properties or not. This would let you to disable editing of the object property value This would let you to disable editing of the object property key If a function is not passed to this prop, then edit functionality would be disabled and the object passed would be readonly. The callback's first argument would be the modified object and second argument is the same value passed to args props. This is just an identifier which can be useful when you want to use multiple instance of this component and when change even occur, this would be passed as 2nd argument to your callback function using which you can determine which instance is modifiedĪ callback function which would be called everytime the object is edited by the user. This can be any object which is JSON compatible If you currently have the JSON string, then use JSON.parse() function to parse the JSON and then pass the resulting object to this component. Raw JSON is not accepted and instad would be considered as a string. This component would expect the JavaScript object to be passed as value. This component can be used in your page where you would like the JSON Editor to be rendered to the end user. Easily customize colors, styles, size and icons by just overriding the css.Identify the url stored as value and highlight it for visual difference.Support adding a new property or remove an existing property from an object.Support inserting of new item or removing an existing item from an array.Support editing any property name or values of both objects and array's.Can automatically identify what type of data is being entered by the user and automatically convert the data to appropriate datatype.Supports expanding and collapsing of Array and Objects.Supports editing datatypes like String, Number, DateTime, Object, Array, null & undefined.Supports viewing JS Object / JSON in tree format.Once installed you can import this component along with its styles and you are done.
Npm json editor download#
If you have an existing react application, run the following commands to download the JSON Editor component. This component is used in following chrome extension for viewing and editing the objects stored in index db by any websites:
This is a simple and tiny react component which is just ~16kb (~4kb gz) package and do not have any external dependency except React. Currently this implementation is available only for react projects. This package contains a JSON Editor component which can be used to edit any JSON compatible JavaScript object from within the browser.
0 kommentar(er)
