https://github.com/samuellawrentz/rc-json-editor
A simple react component to handle JSON editing. No dependencies. Typescript. 😉
https://github.com/samuellawrentz/rc-json-editor
json json-editor json-tree-traversal json-typescript json-viewer react-json react-json-editor react-json-tree react-jsonschema-form
Last synced: 2 months ago
JSON representation
A simple react component to handle JSON editing. No dependencies. Typescript. 😉
- Host: GitHub
- URL: https://github.com/samuellawrentz/rc-json-editor
- Owner: samuellawrentz
- License: mit
- Created: 2022-08-25T06:27:29.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-04-20T14:23:15.000Z (about 3 years ago)
- Last Synced: 2024-08-08T19:41:51.711Z (almost 2 years ago)
- Topics: json, json-editor, json-tree-traversal, json-typescript, json-viewer, react-json, react-json-editor, react-json-tree, react-jsonschema-form
- Language: TypeScript
- Homepage:
- Size: 2.83 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rc-json-editor
A simple react component that handles your JSON editing woes in a wink 😉
## The What and Why
This is a simple React Component _(and hence the "rc")_ that takes your JSON as input and renders a beautiful UI which allows you to edit the JSON on the go. I searched the web for this component for my specific needs and was not able to find one. And so, I created one.
### Why do you want a json-editor component?
You may think, why waste time on a component, while you can put `content-editable="true"` on a `code` tag and allow your users to edit their JSON themselves. But the catch here is, not everyone knows the syntax of a JSON. This tool could help in that case.
### This is not the "Perfect" component
It is just a start, issues and PRs are welcome if you find this component helping your needs. Find the [Demo Storybook](https://samuellawrentz.github.io/rc-json-editor/?path=/story/introduction--page)
## The How?
This component purely works on a custom Datatype called `JsonArray` which extends the `Array` class. So you know, it is an array of sorts, with some additional custom components.
This is a in-progress doc, so please visit the `JsonArrayClass.ts` file for the complete implementation.
> Changes are welcome so are feedbacks.
## Dependencies
There are no big dependencies per se.
- react
- react-dom
## TBD: Things to do
- Provide the full control of the rendering part as a prop, so that users can render the UI based on their needs.
- Provide event callbacks
## Usage
Install the package from npm
```bash
npm install rc-json-editor
```
This is a simple usage example
```jsx
import { JsonEditor } from 'rc-json-editor';
{}}
/>
```
## Props
- `data` - A JSON that needs to be viewed/edited
- `onChange` - A callback that gets executed when the `data` is updated
#### Storybook
Find the demo here - https://samuellawrentz.github.io/rc-json-editor/?path=/story/introduction--page
#### NPM Package
NPM package link - https://www.npmjs.com/package/rc-json-editor