json-edit-react 1.15.10-rc1 → 1.15.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,6 +38,7 @@ A [React](https://github.com/facebook/react) component for editing or viewing JS
|
|
|
38
38
|
- [OnChange function](#onchange-function)
|
|
39
39
|
- [OnError function](#onerror-function)
|
|
40
40
|
- [Copy function](#copy-function)
|
|
41
|
+
- [Custom Buttons](#custom-buttons)
|
|
41
42
|
- [Filter functions](#filter-functions)
|
|
42
43
|
- [Examples](#examples-1)
|
|
43
44
|
- [JSON Schema validation](#json-schema-validation)
|
|
@@ -143,6 +144,7 @@ The only *required* value is `data` (although you will need to provide a `setDat
|
|
|
143
144
|
| `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. |
|
|
144
145
|
| `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)) |
|
|
145
146
|
| `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. |
|
|
147
|
+
| `customButtons` | `CustomButtonDefinition[]` | `[]` | You can add your own buttons to the Edit Buttons panel if you'd like to be able to perform a custom operation on the data. See [Custom Buttons](#custom-buttons) |
|
|
146
148
|
| `jsonParse` | `(input: string) => JsonData` | `JSON.parse` | When editing a block of JSON directly, you may wish to allow some "looser" input -- e.g. 'single quotes', trailing commas, or unquoted field names. In this case, you can provide a third-party JSON parsing method. I recommend [JSON5](https://json5.org/), which is what is used in the [Demo](https://carlosnz.github.io/json-edit-react/) |
|
|
147
149
|
| `jsonStringify` | `(data: JsonData) => string` | `(data) => JSON.stringify(data, null, 2)` | Similarly, you can override the default presentation of the JSON string when starting editing JSON. You can supply different formatting parameters to the native `JSON.stringify()`, or provide a third-party option, like the aforementioned JSON5. |
|
|
148
150
|
|
|
@@ -235,6 +237,18 @@ A similar callback is executed whenever an item is copied to the clipboard (if p
|
|
|
235
237
|
|
|
236
238
|
Since there is very little user feedback when clicking "Copy", a good idea would be to present some kind of notification in this callback.
|
|
237
239
|
|
|
240
|
+
### Custom Buttons
|
|
241
|
+
|
|
242
|
+
In addition to the "Copy", "Edit" and "Delete" buttons that appear by each value, you can add your own buttons if you need to allow some custom operations on the data. Provide an array of button definitions in the `customButtons` prop, in the following definition structure:
|
|
243
|
+
|
|
244
|
+
```js
|
|
245
|
+
{
|
|
246
|
+
Element: React.FC,
|
|
247
|
+
onClick: (nodeData: NodeData, e: React.MouseEvent) => void
|
|
248
|
+
}
|
|
249
|
+
```
|
|
250
|
+
Where `NodeData` is the same data structure received by the previous "Update Functions".
|
|
251
|
+
|
|
238
252
|
## Filter functions
|
|
239
253
|
|
|
240
254
|
You can control which nodes of the data structure can be edited, deleted, or added to, or have their data type changed, by passing Filter functions. These will be called on each property in the data and the attribute will be enforced depending on whether the function returns `true` or `false` (`true` means *cannot* be edited).
|