arqex / react-json

A JSON editor packed as a React.js component. The easiest way of create web forms.

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.

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:

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

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;

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

Docs

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

MIT licensed

License here

react-json's Issues

publish

the version published to npm does not match master. in particular onChange didn't make it into the release, and that would be super useful.

specifying field type for a nested field

What is the syntax to specify types and settings for a field of an embedded object?

For example

var doc = {
  user: "",
  password: "",
  nested : {
    kind : "A"
  }
};

How would one specify that the kind field is a select, with an array of options?

Need to specify "key" attribute

Noticed warning from react when running in dev mode.

Feature request: Ability to specify custom components for types

I really like your library. However, I am currently monkey patching it to be able to bypass the 100letter rule of the string type. It would be nice to specify a custom component for all types. If I could I would integrate this plugin with a nice text editor.

number field only allows entry of period in the middle of a value

If one attempts to change 100 to 100.2 , it is necessary to enter the 2, move the cursor to the left and then only enter the period

If the field has the value 100 and you move the cursor to the between the two zeros and enter the period then the value changes to 10

The standard HTML does not have this behavior.

Most of my numeric values are actually floats, making this behavior a little inconvenient.

Remove href="#" references to be compatible with frontend routers (i.e react-router)

Having href="#" in components breakes react-router route handling.
Also it has not real use but having proper cursor over links.

Related: alvarium#1, alvarium@382dd34

Maybe it can be removed in components. I can make a PR if needed.

Docs Missing for Validation and Settings

Gotta say, love this! I'm really looking forward to including it on my upcoming project.

I just noticed that the docs for validation and settings are missing.
https://github.com/arqex/react-json/blob/master/docs/docs.md

If would be super helpful if you can upload them. Or if you can give a quick example of validation that'd be appreciated.

Updates for the new REACT?

Will there be an update for the new REACT 15?

settings are only applied on first render

I created a generic editor component, where both the data and the settings are retrieved using Ajax.
The standard React Ajax initialization pattern is used.

The initial setting value was {}. The react-json code correctly displays the data retrieved by the Ajax call but ignores the corresponding new setting value.

Generating a placeholder for the initial render before the Ajax call responds is one way to workaround the problem.

var React = require('react');
var RxDom = require('rx-dom');
var Editor = require('react-json');


class JsonUpdate extends React.Component {

    constructor(props) {
        super(props);
        this.name = props.name;

        this.state = {
            value: {},
            settings: {}
        };
    }

    componentDidMount() {
        Rx.DOM.ajax("/status/" + name)
            .subscribe(
            function (data) {
                var info = JSON.parse(data.response);
                this.setState({
                    value: info.data,
                    settings: info.settings
                });

            }.bind(this),
            function (error) {
                console.log(error);
            }
        );
    }

    postChange(value) {
        var str = JSON.stringify(value);
        Rx.DOM.ajax({url: "/apply/" + name, body: str, method: "POST"})
            .subscribe(
            function (data) {
            },
            function (error) {
                console.log(error);
            }
        );
    }

    render() {

        if (Object.getOwnPropertyNames(this.state.settings).length == 0)
            return <div />;
        else
            return (
                <Editor value={this.state.value} settings={this.state.settings} 
                      onChange={this.postChange}></Editor>);

    }
}

module.exports = JsonUpdate;