React-based visual json editor.

Overview

React Json Edit

React-based visual json editor.

Getting Started

Install

npm i react-json-editor-ui -S

Props

key description required default
width The container width false 500
data The editor uses data true null
onChange Callback the data true null
optionsMap When a match for auto-complete on the input value false null

Example:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import JsonEditor from 'react-json-editor-ui'
import 'react-json-editor-ui/dist/react-json-editor-ui.cjs.development.css'

const App = () => {
  const [editObject, setEditObject] = React.useState<any>({
    name: 'may',
    age: null,
    address: [
      'Panyu Shiqiao on Canton',
      'Tianhe',
      {
        city: 'forida meta 11',
      },
    ],
    ohters: {
      id: 1246,
      joinTime: '2017-08-20. 10:20',
      description: 'another',
    },
  })

  return (
    <JsonEditor
      data={editObject}
      onChange={data => {
        setEditObject(data)
      }}
      optionsMap={{
        color: [
          { value: 'red', label: 'Red' },
          { value: 'blue', label: 'Blue' },
        ],
        city: [
          { value: 'beijing', label: 'Beijing' },
          { value: 'shanghai', label: 'Shanghai' },
        ],
      }}
    />
  )
}
export default App
You might also like...
Online React Editor and IDE: compile, run, and host React apps
Online React Editor and IDE: compile, run, and host React apps

react-add-subtract Create a simple React application and learn how to manage the state and render JSX You need to provide an input which accept number

workflowy like editor built with draft-js. Used in https://deepnotes.in.
workflowy like editor built with draft-js. Used in https://deepnotes.in.

deepnotes-editor is the editor used in deepnotes.in. It's a clone of the workflowy.com editor written in draft-js. deepnotes-editor can be used as a r

A React based app to showcase various well-known React patterns
A React based app to showcase various well-known React patterns

The react-play See Demo The react-play is a React project to deomonstrate the well-known React patterns like, Container Component Pattern (Tutorial) H

Supercharge your react app with simple Flux-pattern based Global State, using react owns `useReducer` and eliminate the need for redux!

Supercharge your react app with simple Flux-pattern based Global State, using react owns `useReducer` and eliminate the need for redux!

React Role is lightweight role based access management solution for React applications
React Role is lightweight role based access management solution for React applications

React Role is lightweight role based access management solution which provides components, hooks, and helper methods for controlling access checks and user permissions throughout your entire React application.

Dev-folio-react is a react implementation of html based profile theme DevFolio

DevFolio-React is based on a free HTML template DevFolio. The idea behind this project is to turn this static portfolio into a full-fledge open source dynamic portfolio which anyone can use and setup their personal profile without any hassle.

A react based hacker news clone / client
A react based hacker news clone / client

Hacker News Redesign In an effort to learn to react here is a react based hacker news clone from scratch using the official open Hacker News's API .(N

Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.
Sudoku Game in React: This game is a logic-based, combinatorial number-placement puzzle.

Sudoku Sudoku is a logic-based, combinatorial number-placement puzzle. Try it here Screenshots 1 2 3 4 Demo Demo Video Contributors Ayan Dhara Grawish

Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account.
Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account.

Talk2Feel - A React based chat app using chatengine.io Rest API and has features of creating groups and Sign-In with any valid Google Account. As the mental health of people is becoming a major issue now-a-days therefore this project is created keeping in mind the idea of giving a platform to the people where they can share their worries and thoughts with anyone online and do not need to reveal their identity as well as other personal data.

Visual metasearch engine built with TypeScript, React, Redux & Express

spresso-search Visual metasearch engine built with React, Redux, Express, and TypeScript. Live link to site About Spresso Search scrapes search result

Joshua Rabiu 257 Sep 10, 2022
Visual Docker Container Management on Mac & Windows

⚠️ Deprecation Notice: This project and repository is now deprecated and is no longer under active development, see the related roadmap issue. Please

Docker 12.2k Sep 18, 2022
A React SPA with react-router page navigation and add functionality through json-server endpoints

A React SPA with react-router page navigation and add functionality through json-server endpoints. A custom useFetch hook includes methods for getting and posting data. Search functionality with URLQueryParams. Context Providers allow for theme selection and Reducers for dark/light mode toggling.

null 1 Nov 18, 2021
E-commerce project in React using json-server for REST API consumption.

PROMO ?? HOW Projeto de e-commerce em React utilizando json-server para consumo de API REST Tecnologias utilizadas: React, JavaScript, HTML, CSS. Como

Gabriela Vechiatto 4 Jul 4, 2022
React application that uses json server to store all your important tasks.

I-do React application that uses json server to store all your important tasks. Run the app clone the project

Vaibhav Shukla 1 Nov 2, 2021
React Feedback App Uses A Mock Rest API With Json-server

React Feedback App It allows users to add, update and delete feedback. It uses a mock REST api with json-server. This project goes over all of the fun

null 1 Dec 11, 2021
ToDo List application developed in React.JS from the {JSON} Placeholder API

ToDo List application developed in React.JS from the {JSON} Placeholder API

Vanessa Reis 7 Mar 29, 2022
Note App with react and redux-toolkit, material ui and json server as rest api

Note App Redux-toolkit I decided to do this project for myself as practice. This Note app created by react js and used redux-toolkit for state managem

Mohammad 8 Sep 25, 2022
A JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data

Globalize A JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data.

Globalize.js 4.7k Sep 29, 2022
This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

Healthy Foods ?? ?? Informações sobre o projeto Esse projeto foi desenvolvido como teste técnico para uma vaga Frontend JR Landing Page com dados dinâ

Victor H Correa 1 Jul 21, 2022