# react-jsonify

> A JSON editor packed as a React.js component and the simplest way of creating web forms.

Latest version **0.3.1** (published 2018-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-jsonify
pnpm add react-jsonify
yarn add react-jsonify
bun add react-jsonify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2018-11-12 |
| First published | 2018-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 231.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 97 |
| Author | Javier Marquez |
| Maintainers | ionicabizau |
| Keywords | react, forms, json |

## Links

- npm: https://www.npmjs.com/package/react-jsonify
- Repository: https://github.com/arqex/react-json
- Issues: https://github.com/arqex/react-json/issues
- npm.io page: https://npm.io/package/react-jsonify

## Dependencies (4)

- [freezer-js](https://npm.io/package/freezer-js.md) ^0.5.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [object-assign](https://npm.io/package/object-assign.md) ^2.0.0
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.3.1 (latest) — 2018-11-12
- 0.3.0 — 2018-11-12

## README

Forked from [`argex/react-json`](https://github.com/arqex/react-json).
----

# react-json
A JSON editor packed as a React.js component, but also the simplest way of creating web forms.

[Play safe with react-json forms in the playground](http://codepen.io/arqex/pen/rVWYgo?editors=001).

React-json is like having an special input type for JSON objects, developers only need to listen to changes in the JSON instead of writing all the boilerplate needed to handle every single input of the form. It comes with top features:
* Field type guessing for quick forms
* Validation
* Styles easily customizable
* Extensible with custom field types

## Examples
Do you want to edit some JSON in your app? Pass it to the Json component:
```js
var doc = {
  hola: "amigo",
  array: [1,2,3]
};

React.render(
  <Json value={ doc } onChange={ logChange } />,
  document.body
);

function logChange( value ){
   console.log( value );
}
```
[See this example working](http://codepen.io/arqex/pen/rVWYgo?editors=001)

## A simple form creator
Do you hate creating forms? React-json handles all the dirty markup for you, and makes you focus in what is important;
```js
var doc = {
  user: "",
  password: ""
};

// form: true
// make objects not extensible,
// fields not removable
// and inputs always visible
var settings = {
  form: true,
  fields: { password: {type: 'password'} }
};

React.render(
  <Json value={ doc } settings={ settings }/>,
  document.body
);
```
[See this form working](http://codepen.io/arqex/pen/xGRpOx?editors=011)

## Props

| Name         | Type    | Default | Description |
| ------------ | ------- | ------- | ----------- |
| **value** | Object | none | Represents the JSON object to edit, in order to use react-json as a [controlled component](https://facebook.github.io/react/docs/forms.html#controlled-components).|
| **defaultValue** | Object | `{}` | Represents the JSON object to edit, in order to use react-json as a [uncontrolled component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components).|
| **onChange** | function | `fn(){}` | Callback trigger when the JSON object is updated.|
| **settings** | Object | `{}` | Fine grained customization for the component. [See the settings documentation](docs/settings.md).|

## Docs
React JSON is highly configurable, have a look at the docs to discover how.

## MIT licensed
[License here](LICENSE)

---
_Source: https://npm.io/package/react-jsonify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._