Skip to content

Commit

Permalink
v0.2.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@YYsuni
YYsuni committed Sep 12, 2023
1 parent d2cbf78 commit 11e1bae
Show file tree
Hide file tree
Showing 4 changed files with 27 additions and 19 deletions.
34 changes: 17 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

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

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


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

### Props
| Name | Type | Default | Description |
| :----------------------------- | :------------------------------------------------------------------------ | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src` | `JSON Object` | None | This property contains your input JSON |
| `dark` | `boolean` | false | Keep in dark mode (Don't forget to import `dark.css`) |
| `theme` | `default` \| `a11y` \| `github` \| `vscode` \| `atom`\|`winter-is-coming` | 'default' | Color theme |
| `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. |
| `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) |
| `collapseObjectsAfterLength` | `integer` | 99 | When an integer value is assigned, the object and array will initially collapse. |
| `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. |
| `enableClipboard` | `boolean` | true | When `prop` is not `false`, users can copy objects and arrays to the clipboard by clicking on it. |
| `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. |
| `onAdd` | `function` | - | `(params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void` |
| `onDelete` | `function` | - | `(params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void` |
| `onEdit` | `function` | - | `(params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void` |
| `customizeNode` | `ReactElement`\|`ReactComponent`\|`Options` | - | Highly customize every node. |
| Name | Type | Default | Description |
| :--------------------------- | :------------------------------------------------------------------------ | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `src` | `JSON Object` | None | This property contains your input JSON |
| `dark` | `boolean` | false | Keep in dark mode (Don't forget to import `dark.css`) |
| `theme` | `default` \| `a11y` \| `github` \| `vscode` \| `atom`\|`winter-is-coming` | 'default' | Color theme |
| `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. |
| `collapseStringMode` | `directly` \| `word` \| `address` | `directly` | If the `word` is assigned, the collapsed length will be adjusted to fully display the last word.(English only) |
| `collapseObjectsAfterLength` | `integer` | 99 | When an integer value is assigned, the object and array will initially collapse. |
| `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. |
| `enableClipboard` | `boolean` | true | When `prop` is not `false`, users can copy objects and arrays to the clipboard by clicking on it. |
| `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. |
| `onAdd` | `function` | - | `(params: { indexOrName: string\| number, depth: number, src: any; parentType: 'object' \| 'array' }) => void` |
| `onDelete` | `function` | - | `(params:{ value: any,indexOrName: string \| number,depth: number,src: any,parentType: 'object' \| 'array'}) => void` |
| `onEdit` | `function` | - | `(params: { newValue: any, oldValue: any, depth: number, src: any, indexOrName: string \| number, parentType: 'object' \| 'array'}) => void` |
| `customizeNode` | `ReactElement`\|`ReactComponent`\|`Options` | - | Highly customize every node. |

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

### Edit keyboard shortcuts
When element is editable:
* `Ctrl/Cmd+Click` => Edit Mode (canary)
* `Ctrl/Cmd+Click` => Edit Mode
* `Enter` => Submit
* `Esc` => Cancel

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react18-json-view",
"version": "0.2.5-canary.5",
"version": "0.2.5",
"type": "module",
"description": "JSON viewer for react18",
"main": "dist/cjs/index.cjs",
Expand Down
4 changes: 3 additions & 1 deletion website/src/contents/collapse-string.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ export default function CollapseString() {
$h‍_once.Map(Map),
$h‍_once.Math(Math),
$h‍_once.Number(Number),`,
multiSpaces: ' &nbsp &nbsp blank tab \f f\f '
multiSpaces: ` blank tab lf
`
}}
/>
</div>
Expand Down
6 changes: 6 additions & 0 deletions website/src/contents/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ export default function Hero() {
<GithubSVG className='mr-1 h-4 w-4' />
Github
</a>
<a
href='https://json-view-online.vercel.app/'
target='_blank'
className='flex h-8 items-center rounded-lg border px-2 text-sm'>
Demo
</a>
<Theme />
</div>
</>
Expand Down

2 comments on commit 11e1bae

@vercel
Copy link

@vercel vercel bot commented on 11e1bae Sep 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react18-json-view – ./

react18-json-view.vercel.app
react18-json-view-yysuni.vercel.app
react18-json-view-git-main-yysuni.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 11e1bae Sep 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

json-view – ./website

react18-json-view-84aw.vercel.app
react18-json-view.yysuni.com
json-view-yysuni.vercel.app
jv.yysuni.com
json-view-git-main-yysuni.vercel.app

Please sign in to comment.