liform-react: a form generator from JSON schema released

Recently we have been working in a project where we needed a lot forms, with some complexity. After much looking, we decided that generating React forms from a JSON schema specification made sense and could save a lot of work. What does this mean? Basically to produce a form from a schema like this:

Our needs were quite specific, as we were writing a quite long “Wizard” form, so we wanted it to be flexible enough to accommodate this usage. Also, we wanted:

• Integration with redux-form, a great form library, that allows to manage the form state in Redux a sane way.
• Be able to customize widgets and the form itself in a great way.
• Integrate JSON schema validation, with ajv.

There are other generators out there, being perhps Mozilla’s React react-jsonschema-form the most popular, but it lacked some of the requirements, so we wrote our own.

How to use it?

import React from 'react'
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import { Provider } from 'react-redux'
import Liform from 'liform-react'

const reducer = combineReducers({ form: formReducer })
const store = createStore(reducer)
const schema = {
        'type':'object',
        'properties': {
            'title': { 'type':'string', 'title': 'Title' },
            'type': { 'enum':[ 'One','Two' ], 'type':'string', 'title': 'Select a type' },
            'color': { 'type':'string', 'widget': 'color', 'title': 'In which color' },
            'checkbox': { 'type':'boolean', 'title': 'I agree with your terms' }
        }
    }
}
return (
    <Provider store={store}>
        <Liform schema={schema} onSubmit={(v) => {console.log(v)}}/>
    </Provider>
)

And this will produce this form.

As you can see, the default theme is written in Bootstrap. This is not the theme we actually use, ours is quite specific. But you aren’t in any way tied to Bootstrap here, and you are more than welcome to write your own widgets and entire themes if you wish so.

Check out the docs at https://limenius.github.io/liform-react/ to learn more about its features and how to use it!

Enjoy!

PS: If you happen to work with PHP you may have a look into this other post, about generating JSON schema from Symfony forms, as we have also written a library for this.