A JSON editor packed as a React.js component and the simplest way of creating web forms.
Play safe with react-json forms in the playground. 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
# Using npm
npm install --save react-jsonify
# Using yarn
yarn add react-jsonify
var doc = {
hola: "amigo"
array: [1,2,3]
};
React.render(
<Json value={ doc } onChange={ logChange } />,
document.body
);
function logChange( value ){
console.log( value );
}
Do you hate creating forms? React-json handles all the dirty markup for you, and makes you focus in what is important;
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
);
Name | Type | Default | Description |
---|---|---|---|
value | Object | none | Represents the JSON object to edit, in order to use react-json as a controlled component. |
defaultValue | Object | {} |
Represents the JSON object to edit, in order to use react-json as a uncontrolled component. |
onChange | function | fn(){} |
Callback trigger when the JSON object is updated. |
settings | Object | {} |
Fine grained customization for the component. See the settings documentation. |
React JSON is highly configurable, have a look at the docs to discover how.
There are few ways to get help:
- Please post questions on Stack Overflow. You can open issues with questions, as long you add a link to your Stack Overflow question.
- For bug reports and feature requests, open issues. 🐛
- For direct and quick help, you can use Codementor. 🚀
The main component. *
Have an idea? Found a bug? See how to contribute.
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
-
Starring and sharing the projects you like 🚀
-
—I love books! I will remember you after years if you buy me one. 😁 📖
-
—You can make one-time donations via PayPal. I'll probably buy a
coffeetea. 🍵 -
—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone).
-
Bitcoin—You can send me bitcoins at this address (or scanning the code below):
1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6
Thanks! ❤️
The original project was argex/react-json
. I forked it and made a couple of changes