Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
json-edit-react
Advanced tools
json-edit-react - npm Package Compare versions
Comparing version 1.13.1 to 1.13.2
| { | ||
| "name": "json-edit-react", | ||
| "version": "1.13.1", | ||
| "version": "1.13.2", | ||
| "description": "React component for editing or viewing JSON/object data", | ||
@@ -77,4 +77,7 @@ "main": "build/index.cjs.js", | ||
| "json-inspector", | ||
| "json-schema", | ||
| "react-component", | ||
| "react-json", | ||
| "react18-json-view", | ||
| "react-json-view", | ||
| "theme", | ||
@@ -81,0 +84,0 @@ "tree", |
@@ -11,2 +11,3 @@ # json-edit-react | ||
| - fine-grained control over which elements can be edited, deleted, or added to | ||
| - full [JSON Schema](https://json-schema.org/) validation (using 3rd-party validation library) | ||
| - customisable UI, through simple, pre-defined [themes](#themes--styles), specific CSS overrides for UI components, or by targeting CSS classes | ||
@@ -33,2 +34,3 @@ - self-contained — rendered with plain HTML/CSS, so no dependance on external UI libraries | ||
| - [Examples](#examples-1) | ||
| - [JSON Schema validation](#json-schema-validation) | ||
| - [Drag-n-drop](#drag-n-drop) | ||
@@ -92,3 +94,3 @@ - [Search/Filtering](#searchfiltering) | ||
| - Drag and drop items to change the structure or modify display order | ||
| - JSON text input can accept the more forgiving [JSON5](https://json5.org/) syntax as input | ||
| - JSON text input can accept the more convenient [JSON5](https://json5.org/) syntax as input | ||
@@ -141,3 +143,3 @@ ## Props overview | ||
| A callback to be executed whenever a data update (edit, delete or add) occurs can be provided. You might wish to use this to update your data state, or make an API call, for example. If you want the same function for all updates, then just the `onUpdate` prop is sufficient. However, should you require something different for editing, deletion and addition, then you can provide separate Update functions via the `onEdit`, `onDelete` and `onAdd` props. | ||
| A callback to be executed whenever a data update (edit, delete or add) occurs can be provided. You might wish to use this to update some external state, make an API call, or [validate the data structure](#json-schema-validation) against a JSON schema. If you want the same function for all updates, then just the `onUpdate` prop is sufficient. However, should you require something different for editing, deletion and addition, then you can provide separate Update functions via the `onEdit`, `onDelete` and `onAdd` props. | ||
@@ -297,2 +299,42 @@ The function will receive the following object as a parameter: | ||
| ### JSON Schema validation | ||
| As well as dynamically controlling *access* to the various edit tools as described above, it's possible to do full [JSON Schema](https://json-schema.org/) validation by creating an [Update Function](#update-functions) that passes the data to a 3rd-party schema validation library (e.g. [Ajv](https://ajv.js.org/)). This will then reject any invalid input, and display an error in the UI (or via a custom [onError](#onerror-function) function). You can see an example of this in the [Demo](https://carlosnz.github.io/json-edit-react/) with the "JSON Schema Validation" data set (and the "Custom Nodes" data set). | ||
| An example `onUpdate` validation function (using Ajv) could be something like this: | ||
| ```js | ||
| import { JsonEditor } from 'json-edit-react' | ||
| import Ajv from 'ajv' | ||
| import schema from './my-json-schema.json' | ||
| const ajv = new Ajv() | ||
| const validate = ajv.compile(schema) | ||
| /// Etc.... | ||
| // In the React components: | ||
| return | ||
| <JsonEditor | ||
| data={ jsonData } | ||
| onUpdate={ ({ newData }) => { | ||
| const valid = validate(newData) | ||
| if (!valid) { | ||
| console.log('Errors', validate.errors) | ||
| const errorMessage = validate.errors | ||
| ?.map((error) => `${error.instancePath}${error.instancePath ? ': ' : ''}${error.message}`) | ||
| .join('\n') | ||
| // Send detailed error message to an external UI element, such as a "Toast" notification | ||
| displayError({ | ||
| title: 'Not compliant with JSON Schema', | ||
| description: errorMessage, | ||
| status: 'error', | ||
| }) | ||
| // This string returned to and displayed in json-edit-react UI | ||
| return 'JSON Schema error' | ||
| } | ||
| }} | ||
| { ...otherProps } /> | ||
| ``` | ||
| ### Drag-n-drop | ||
@@ -627,3 +669,3 @@ | ||
| 1. **JSON Schema validation**. We can currently specify a reasonable degree of control over what can be edited using [Filter functions](#filter-functions) with the restriction props, but I'd like to go a step further and be able to pass in a [JSON Schema](https://json-schema.org/) and have the data be automatically validated against it, with the results reflected in the UI. This would allow control over data types and prevent missing properties, something that is not currently possible. | ||
| 1. ~~**JSON Schema validation**. We can currently specify a reasonable degree of control over what can be edited using [Filter functions](#filter-functions) with the restriction props, but I'd like to go a step further and be able to pass in a [JSON Schema](https://json-schema.org/) and have the data be automatically validated against it, with the results reflected in the UI. This would allow control over data types and prevent missing properties, something that is not currently possible.~~ 👍 [Done](#json-schema-validation) (using 3rd-party validation library) | ||
| 2. ~~**Search/Visibility filter** — allow the user to narrow the list of visible keys with a simple search input. This would be useful for very large data objects, but is possibly getting a bit too much in terms of opinionated UI, so would need to ensure it can be styled easily. Perhaps it would be better if the "Search" input was handled outside this package, and we just accepted a "search" string prop?~~ 👍 [Done](#searchfiltering) | ||
@@ -637,2 +679,3 @@ | ||
| - **1.13.2**: Slightly better error handling when validating [JSON schema](#json-schema-validation) | ||
| - **1.13.0**: | ||
@@ -639,0 +682,0 @@ - [Drag-n-drop](#drag-n-drop) editing! |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.86%
231062
- Number of lines in readme file
- increased by6.27%
729
Worsened metrics
- Lines of code
- decreased by-0.14%
731
No dependency changes