Skip to content

Commit 11e1bae

Browse files
YYsuniYYsuni
committed
v0.2.5
1 parent d2cbf78 commit 11e1bae

File tree

4 files changed

+27
-19
lines changed

4 files changed

+27
-19
lines changed

‎README.md

+17-17
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
React function component for displaying javascript arrays and JSON objects. Supports all JS types.
1616

17-
[Website](https://jv.yysuni.com/), [Storybook](https://react18-json-view.vercel.app/)
17+
[Website](https://jv.yysuni.com/), [Storybook](https://react18-json-view.vercel.app/),[Online](https://json-view-online.vercel.app/)
1818

1919

2020
![JSON View](sample.png "JSON View")
@@ -40,21 +40,21 @@ import 'react18-json-view/src/style.css'
4040
```
4141

4242
### Props
43-
| Name | Type | Default | Description |
44-
| :----------------------------- | :------------------------------------------------------------------------ | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45-
| `src` | `JSON Object` | None | This property contains your input JSON |
46-
| `dark` | `boolean` | false | Keep in dark mode (Don't forget to import `dark.css`) |
47-
| `theme` | `default` \| `a11y` \| `github` \| `vscode` \| `atom`\|`winter-is-coming` | 'default' | Color theme |
48-
| `collapseStringsAfterLength` | `integer` | 99 | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. |
49-
| `collapseStringMode` (@canary) | `directly` \| `word` \| `address` | `directly` | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.(English only) |
50-
| `collapseObjectsAfterLength` | `integer` | 99 | When an integer value is assigned, the object and array will initially collapse. |
51-
| `collapsed` | `boolean` \| `integer` \| `function` | false | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function. |
52-
| `enableClipboard` | `boolean` | true | When `prop` is not `false`, users can copy objects and arrays to the clipboard by clicking on it. |
53-
| `editable` | `boolean` \| {add?: `boolean`, edit?: `boolean`, delete?: `boolean`} | false | When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available. |
54-
| `onAdd` | `function` | - | `(params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void` |
55-
| `onDelete` | `function` | - | `(params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void` |
56-
| `onEdit` | `function` | - | `(params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void` |
57-
| `customizeNode` | `ReactElement`\|`ReactComponent`\|`Options` | - | Highly customize every node. |
43+
| Name | Type | Default | Description |
44+
| :--------------------------- | :------------------------------------------------------------------------ | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
45+
| `src` | `JSON Object` | None | This property contains your input JSON |
46+
| `dark` | `boolean` | false | Keep in dark mode (Don't forget to import `dark.css`) |
47+
| `theme` | `default` \| `a11y` \| `github` \| `vscode` \| `atom`\|`winter-is-coming` | 'default' | Color theme |
48+
| `collapseStringsAfterLength` | `integer` | 99 | When an integer value is assigned, strings longer than that length will be truncated and indicated by an ellipsis. To expand or collapse the string content, simply click on the string value. |
49+
| `collapseStringMode` | `directly` \| `word` \| `address` | `directly` | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.(English only) |
50+
| `collapseObjectsAfterLength` | `integer` | 99 | When an integer value is assigned, the object and array will initially collapse. |
51+
| `collapsed` | `boolean` \| `integer` \| `function` | false | When set to true(false), all nodes will be (not) collapsed by default. When using an integer value, it will collapse at a specific depth. The collapsed also can be a function. |
52+
| `enableClipboard` | `boolean` | true | When `prop` is not `false`, users can copy objects and arrays to the clipboard by clicking on it. |
53+
| `editable` | `boolean` \| {add?: `boolean`, edit?: `boolean`, delete?: `boolean`} | false | When set to true, you can add, edit, or delete the property, and the actions will trigger onAdd, onEdit, or onDelete. Options is available. |
54+
| `onAdd` | `function` | - | `(params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void` |
55+
| `onDelete` | `function` | - | `(params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void` |
56+
| `onEdit` | `function` | - | `(params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void` |
57+
| `customizeNode` | `ReactElement`\|`ReactComponent`\|`Options` | - | Highly customize every node. |
5858

5959
### Collapsed function
6060
```ts
@@ -101,7 +101,7 @@ This component does not perform any cloning operations, so every step of the ope
101101

102102
### Edit keyboard shortcuts
103103
When element is editable:
104-
* `Ctrl/Cmd+Click` => Edit Mode (canary)
104+
* `Ctrl/Cmd+Click` => Edit Mode
105105
* `Enter` => Submit
106106
* `Esc` => Cancel
107107

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react18-json-view",
3-
"version": "0.2.5-canary.5",
3+
"version": "0.2.5",
44
"type": "module",
55
"description": "JSON viewer for react18",
66
"main": "dist/cjs/index.cjs",

‎website/src/contents/collapse-string.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@ export default function CollapseString() {
100100
$h‍_once.Map(Map),
101101
$h‍_once.Math(Math),
102102
$h‍_once.Number(Number),`,
103-
multiSpaces: ' &nbsp &nbsp blank tab \f f\f '
103+
multiSpaces: ` blank tab lf
104+
105+
`
104106
}}
105107
/>
106108
</div>

‎website/src/contents/hero.tsx

+6
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ export default function Hero() {
4040
<GithubSVG className='mr-1 h-4 w-4' />
4141
Github
4242
</a>
43+
<a
44+
href='https://json-view-online.vercel.app/'
45+
target='_blank'
46+
className='flex h-8 items-center rounded-lg border px-2 text-sm'>
47+
Demo
48+
</a>
4349
<Theme />
4450
</div>
4551
</>

0 commit comments

Comments
 (0)