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.0-rc1 to 1.13.0-rc2
@@ -58,3 +58,2 @@ /// <reference types="react" /> | ||
| customText?: CustomTextDefinitions; | ||
| useJSON5Editor?: boolean | JSON5StringifyOptions; | ||
| } | ||
@@ -160,3 +159,2 @@ declare const DataTypes: readonly ["string", "number", "boolean", "null", "object", "array"]; | ||
| defaultValue: unknown; | ||
| useJSON5Editor: boolean | JSON5StringifyOptions; | ||
| } | ||
@@ -214,7 +212,2 @@ type ValueData = string | number | boolean; | ||
| type ThemeInput = ThemeName | Theme | Partial<ThemeStyles> | Array<ThemeName | Theme | Partial<ThemeStyles>>; | ||
| interface JSON5StringifyOptions { | ||
| space?: number; | ||
| quote?: string; | ||
| replacer?: Array<string | number> | ((this: any, key: string, value: any) => any) | null | undefined; | ||
| } | ||
@@ -221,0 +214,0 @@ declare const JsonEditor: React$1.FC<JsonEditorProps>; |
| { | ||
| "name": "json-edit-react", | ||
| "version": "1.13.0-rc1", | ||
| "version": "1.13.0-rc2", | ||
| "description": "React component for editing or viewing JSON/object data", | ||
@@ -5,0 +5,0 @@ "main": "build/index.cjs.js", |
@@ -95,42 +95,42 @@ # json-edit-react | ||
| | prop | type | default | description | | ||
| | ----------------------- | --------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `data` | `object\|array` | | The data to be displayed / edited | | ||
| | `rootName` | `string` | `"data"` | A name to display in the editor as the root of the data object. | | ||
| | `onUpdate` | `UpdateFunction` | | A function to run whenever a value is **updated** (edit, delete *or* add) in the editor. See [Update functions](#update-functions). | | ||
| | `onEdit` | `UpdateFunction` | | A function to run whenever a value is **edited**. | | ||
| | `onDelete` | `UpdateFunction` | | A function to run whenever a value is **deleted**. | | ||
| | `onAdd` | `UpdateFunction` | | A function to run whenever a new property is **added**. | | ||
| | `onChange` | `OnChangeFunction` | | A function to modify/constrain user input as they type -- see [OnChange functions](#onchange-function). | | ||
| | `onError` | `OnErrorFunction` | | A function to run whenever the component reports an error -- see [OnErrorFunction](#onerror-function). | | ||
| | `showErrorMessages` | `boolean ` | `true` | Whether or not the component should display its own error messages (you'd probably only want to disable this if you provided your own `onError` function) | | ||
| | `enableClipboard` | `boolean\|CopyFunction` | `true` | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied. | | ||
| | `indent` | `number` | `3` | Specify the amount of indentation for each level of nesting in the displayed data. | | ||
| | `collapse` | `boolean\|number\|FilterFunction` | `false` | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions). | | ||
| | `restrictEdit` | `boolean\|FilterFunction` | `false` | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions) | | ||
| | `restrictDelete` | `boolean\|FilterFunction` | `false` | As with `restrictEdit` but for deletion | | ||
| | `restrictAdd` | `boolean\|FilterFunction` | `false` | As with `restrictEdit` but for adding new properties | | ||
| | `restrictTypeSelection` | `boolean\|FilterFunction` | `true` | Set to `false` to enable drag and drop functionality. See [Drag-n-drop](#drag-n-drop) | | ||
| | `restrictDrag` | `boolean\|DataType[]\|TypeFilterFunction` | `false` | For restricting the data types the user can select. Can be a list of data types (e.g. `[ 'string', 'number', 'boolean', 'array', 'object', 'null' ]`) or a boolean. A function can be provided -- it should take the same input as the above `FilterFunction`s, but output should be `boolean \| DataType[]`. | | ||
| | `searchText` | `string` | `undefined` | Data visibility will be filtered by matching against value, using the method defined below in `searchFilter` | | ||
| | `searchFilter` | `"key"\|"value"\|"all"\|SearchFilterFunction` | `undefined` | Define how `searchText` should be matched to filter the visible items. See [Search/Filtering](#searchfiltering) | | ||
| | `searchDebounceTime` | `number` | `350` | Debounce time when `searchText` changes | | ||
| | `keySort` | `boolean\|CompareFunction` | `false` | If `true`, object keys will be ordered (using default JS `.sort()`). A [compare function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) can also be provided to define sorting behaviour. | | ||
| | `showArrayIndices` | `boolean` | `true` | Whether or not to display the index (as a property key) for array elements. | | ||
| | `showStringQuotes` | `boolean` | `true` | Whether or not to display string values in "quotes". | | ||
| | `showCollectionCount` | `boolean\|"when-closed"` | `true` | Whether or not to display the number of items in each collection (object or array). | | ||
| | `defaultValue` | `any\|DefaultValueFilterFunction` | `null` | When a new property is added, it is initialised with this value. A function can be provided with the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.) | | ||
| | `stringTruncate` | `number` | `250` | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing. | | ||
| | `translations` | `LocalisedStrings` object | `{ }` | UI strings (such as error messages) can be translated by passing an object containing localised string values (there are only a few). See [Localisation](#localisation) | | ||
| | `theme` | `string\|ThemeObject\|[string, ThemeObject]` | `"default"` | Either the name of one of the built-in themes, or an object specifying some or all theme properties. See [Themes](#themes--styles). | | ||
| | `className` | `string` | | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward. | | ||
| | `id` | `string` | | Name for the HTML `id` attribute on the main component container. | | ||
| | `icons` | `{[iconName]: JSX.Element, ... }` | `{ }` | Replace the built-in icons by specifying them here. See [Themes](#themes--styles). | | | ||
| | `minWidth` | `number\|string` (CSS value) | `250` | Minimum width for the editor container. | | ||
| | `maxWidth` | `number\|string` (CSS value) | `600` | Maximum width for the editor container. | | ||
| | `rootFontSize` | `number\|string` (CSS value) | `16px` | The "base" font size from which all other sizings are derived (in `em`s). By changing this you will scale the entire component. container. | | ||
| | `customNodeDefinitions` | `CustomNodeDefinition[]` | | You can provide customised components to override specific nodes in the data tree, according to a condition function. See see [Custom nodes](#custom-nodes) for more detail. (A simple custom component to turn url strings into active links is provided in the main package -- see [here](#active-hyperlinks)) | | ||
| | `customText` | `CustomTextDefinitions` | | In addition to [localising the component](#localisation) text strings, you can also *dynamically* alter it, depending on the data. See [Custom Text](#custom-text) for more detail. | | ||
| | `useJSON5Editor` | `boolean` \| `JSON5StringifyOptions` | | When editing whole objects as JSON text, you can always enter text in the more convenient [JSON5](https://json5.org) format. However, by setting `useJSON5Editor: true`, the text input will be *displayed* as JSON5 when the input area appears. (You can also provide a JSON5.stringify `options` object to specify the exact formatting) | | ||
| | prop | type | default | description | | ||
| | ----------------------- | --------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `data` | `object\|array` | | The data to be displayed / edited | | ||
| | `rootName` | `string` | `"data"` | A name to display in the editor as the root of the data object. | | ||
| | `onUpdate` | `UpdateFunction` | | A function to run whenever a value is **updated** (edit, delete *or* add) in the editor. See [Update functions](#update-functions). | | ||
| | `onEdit` | `UpdateFunction` | | A function to run whenever a value is **edited**. | | ||
| | `onDelete` | `UpdateFunction` | | A function to run whenever a value is **deleted**. | | ||
| | `onAdd` | `UpdateFunction` | | A function to run whenever a new property is **added**. | | ||
| | `onChange` | `OnChangeFunction` | | A function to modify/constrain user input as they type -- see [OnChange functions](#onchange-function). | | ||
| | `onError` | `OnErrorFunction` | | A function to run whenever the component reports an error -- see [OnErrorFunction](#onerror-function). | | ||
| | `showErrorMessages` | `boolean ` | `true` | Whether or not the component should display its own error messages (you'd probably only want to disable this if you provided your own `onError` function) | | ||
| | `enableClipboard` | `boolean\|CopyFunction` | `true` | Whether or not to enable the "Copy to clipboard" button in the UI. If a function is provided, `true` is assumed and this function will be run whenever an item is copied. | | ||
| | `indent` | `number` | `3` | Specify the amount of indentation for each level of nesting in the displayed data. | | ||
| | `collapse` | `boolean\|number\|FilterFunction` | `false` | Defines which nodes of the JSON tree will be displayed "opened" in the UI on load. If `boolean`, it'll be either all or none. A `number` specifies a nesting depth after which nodes will be closed. For more fine control a function can be provided — see [Filter functions](#filter-functions). | | ||
| | `restrictEdit` | `boolean\|FilterFunction` | `false` | If `true`, no editing is permitted. A function can be provided for more specificity — see [Filter functions](#filter-functions) | | ||
| | `restrictDelete` | `boolean\|FilterFunction` | `false` | As with `restrictEdit` but for deletion | | ||
| | `restrictAdd` | `boolean\|FilterFunction` | `false` | As with `restrictEdit` but for adding new properties | | ||
| | `restrictTypeSelection` | `boolean\|FilterFunction` | `true` | Set to `false` to enable drag and drop functionality. See [Drag-n-drop](#drag-n-drop) | | ||
| | `restrictDrag` | `boolean\|DataType[]\|TypeFilterFunction` | `false` | For restricting the data types the user can select. Can be a list of data types (e.g. `[ 'string', 'number', 'boolean', 'array', 'object', 'null' ]`) or a boolean. A function can be provided -- it should take the same input as the above `FilterFunction`s, but output should be `boolean \| DataType[]`. | | ||
| | `searchText` | `string` | `undefined` | Data visibility will be filtered by matching against value, using the method defined below in `searchFilter` | | ||
| | `searchFilter` | `"key"\|"value"\|"all"\|SearchFilterFunction` | `undefined` | Define how `searchText` should be matched to filter the visible items. See [Search/Filtering](#searchfiltering) | | ||
| | `searchDebounceTime` | `number` | `350` | Debounce time when `searchText` changes | | ||
| | `keySort` | `boolean\|CompareFunction` | `false` | If `true`, object keys will be ordered (using default JS `.sort()`). A [compare function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) can also be provided to define sorting behaviour. | | ||
| | `showArrayIndices` | `boolean` | `true` | Whether or not to display the index (as a property key) for array elements. | | ||
| | `showStringQuotes` | `boolean` | `true` | Whether or not to display string values in "quotes". | | ||
| | `showCollectionCount` | `boolean\|"when-closed"` | `true` | Whether or not to display the number of items in each collection (object or array). | | ||
| | `defaultValue` | `any\|DefaultValueFilterFunction` | `null` | When a new property is added, it is initialised with this value. A function can be provided with the same input as the `FilterFunction`s, but should output a value. This allows a different default value to be used depending on the data state (e.g. default for top level is an object, but a string elsewhere.) | | ||
| | `stringTruncate` | `number` | `250` | String values longer than this many characters will be displayed truncated (with `...`). The full string will always be visible when editing. | | ||
| | `translations` | `LocalisedStrings` object | `{ }` | UI strings (such as error messages) can be translated by passing an object containing localised string values (there are only a few). See [Localisation](#localisation) | | ||
| | `theme` | `string\|ThemeObject\|[string, ThemeObject]` | `"default"` | Either the name of one of the built-in themes, or an object specifying some or all theme properties. See [Themes](#themes--styles). | | ||
| | `className` | `string` | | Name of a CSS class to apply to the component. In most cases, specifying `theme` properties will be more straightforward. | | ||
| | `id` | `string` | | Name for the HTML `id` attribute on the main component container. | | ||
| | `icons` | `{[iconName]: JSX.Element, ... }` | `{ }` | Replace the built-in icons by specifying them here. See [Themes](#themes--styles). | | | ||
| | `minWidth` | `number\|string` (CSS value) | `250` | Minimum width for the editor container. | | ||
| | `maxWidth` | `number\|string` (CSS value) | `600` | Maximum width for the editor container. | | ||
| | `rootFontSize` | `number\|string` (CSS value) | `16px` | The "base" font size from which all other sizings are derived (in `em`s). By changing this you will scale the entire component. container. | | ||
| | `customNodeDefinitions` | `CustomNodeDefinition[]` | | You can provide customised components to override specific nodes in the data tree, according to a condition function. See see [Custom nodes](#custom-nodes) for more detail. (A simple custom component to turn url strings into active links is provided in the main package -- see [here](#active-hyperlinks)) | | ||
| | `customText` | `CustomTextDefinitions` | | In addition to [localising the component](#localisation) text strings, you can also *dynamically* alter it, depending on the data. See [Custom Text](#custom-text) for more detail. | | ||
| ## Update functions | ||
@@ -137,0 +137,0 @@ |
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
Worsened metrics
- Total package byte prevSize
- decreased by-0.93%
228564
- Lines of code
- decreased by-1.22%
729
No dependency changes