json-edit-react 1.30.0 → 1.30.1
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 +77 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,11 +6,86 @@ The {{BLOCKS}} below are replaced from the equivalent blocks in the main README
|
|
|
6
6
|
`yarn prepareReadme` script is run (which also happens before publish).
|
|
7
7
|
-->
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<img width="60" alt="screenshot" src="image/logo192.png" style="float:left; margin-right: 1em;">
|
|
10
|
+
|
|
11
|
+
A highly-configurable [React](https://github.com/facebook/react) component for editing or viewing JSON/object data
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [Explore the Demo](https://carlosnz.github.io/json-edit-react/) <!-- omit in toc -->
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
[](https://deepwiki.com/CarlosNZ/json-edit-react)
|
|
21
|
+
[](https://github.com/CarlosNZ/json-edit-react/discussions)
|
|
22
|
+
[](https://github.com/sponsors/CarlosNZ)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Features include:
|
|
26
|
+
|
|
27
|
+
- ✅ **Easy inline editing** of individual values or whole blocks of JSON text
|
|
28
|
+
- 🔒 **Granular control** – restrict edits, deletions, or additions per element
|
|
29
|
+
- 📏 **[JSON Schema](https://json-schema.org/) validation** (using 3rd-party validation library)
|
|
30
|
+
- 🎨 **Customisable UI** — built-in or custom [themes](https://github.com/CarlosNZ/json-edit-react#themes--styles), CSS overrides or targeted classes
|
|
31
|
+
- 📦 **Self-contained** — plain HTML/CSS, no external UI library dependencies, and *zero runtime dependencies*
|
|
32
|
+
- 🔍 **Search & filter** — find data by key, value or custom function
|
|
33
|
+
- 🚧 **[Custom components](https://github.com/CarlosNZ/json-edit-react#custom-nodes)** — replace keys and/or values with specialised components (e.g. date picker, links, images, `undefined`, `BigInt`, `Symbol`)
|
|
34
|
+
- 🌏 **[Localisation](https://github.com/CarlosNZ/json-edit-react#localisation)** — easily translate UI labels and messages
|
|
35
|
+
- 🔄 **[Drag-n-drop](https://github.com/CarlosNZ/json-edit-react#drag-n-drop)** re-ordering within objects/arrays
|
|
36
|
+
- 🎹 **[Keyboard customisation](https://github.com/CarlosNZ/json-edit-react#keyboard-customisation)** — define your own key bindings
|
|
37
|
+
- 🎮 **[External control](https://github.com/CarlosNZ/json-edit-react#external-control-1)** via callbacks and triggers
|
|
38
|
+
|
|
39
|
+
💡 Try the **[Live Demo](https://carlosnz.github.io/json-edit-react/)** to see these features in action!
|
|
40
|
+
|
|
41
|
+
<img width="392" alt="screenshot" src="image/screenshot.png">
|
|
10
42
|
|
|
11
43
|
<img width="838" alt="breaking changes" src="image/admonition_npm.png">
|
|
12
44
|
|
|
13
|
-
|
|
45
|
+
## Installation
|
|
46
|
+
|
|
47
|
+
```sh
|
|
48
|
+
# Depending on your package manager:
|
|
49
|
+
|
|
50
|
+
npm i json-edit-react
|
|
51
|
+
# OR
|
|
52
|
+
yarn add json-edit-react
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Implementation
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
import { JsonEditor } from 'json-edit-react'
|
|
59
|
+
|
|
60
|
+
// In your React component:
|
|
61
|
+
return (
|
|
62
|
+
<JsonEditor
|
|
63
|
+
data={ jsonData }
|
|
64
|
+
setData={ setJsonData } // optional
|
|
65
|
+
{ ...otherProps } />
|
|
66
|
+
);
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Usage
|
|
70
|
+
|
|
71
|
+
**(for end user)**
|
|
72
|
+
|
|
73
|
+
It's pretty self explanatory (click the "edit" icon to edit, etc.), but there are a few not-so-obvious ways of interacting with the editor:
|
|
74
|
+
|
|
75
|
+
- **Double-click** a value (or a key) to edit it
|
|
76
|
+
- When editing a string, use `Cmd/Ctrl/Shift-Enter` to add a new line (`Enter` submits the value)
|
|
77
|
+
- It's the opposite when editing a full object/array node (which you do by **clicking "edit"** on an object or array value) — `Enter` for new line, and `Cmd/Ctrl/Shift-Enter` for submit
|
|
78
|
+
- `Escape` to **cancel** editing
|
|
79
|
+
- When clicking the "**clipboard**" icon, holding down `Cmd/Ctrl` will copy the *path* to the selected node rather than its value
|
|
80
|
+
- When opening/closing a node, hold down "Alt/Option" to open/close *all* child nodes at once
|
|
81
|
+
- For Number inputs, **arrow-up** and **down** keys will increment/decrement the value
|
|
82
|
+
- For Boolean inputs, **space bar** will toggle the value
|
|
83
|
+
- Easily navigate to the next or previous node for editing using the `Tab`/`Shift-Tab` keys.
|
|
84
|
+
- **Drag and drop** items to change the structure or modify display order
|
|
85
|
+
- When editing is not permitted, double-clicking a string value will expand the text to the full value if it is truncated due to length (there is also a clickable "..." for long strings)
|
|
86
|
+
- **JSON text input** can accept "looser" input, if an additional JSON parsing method is provided (e.g. [JSON5](https://json5.org/)). See `jsonParse` prop.
|
|
87
|
+
|
|
88
|
+
[Have a play with the Demo app](https://carlosnz.github.io/json-edit-react/) to get a feel for it!
|
|
14
89
|
|
|
15
90
|
---
|
|
16
91
|
|