« HOME

liform-react: a form generator from JSON schema released

By Nacho Martín on 12 February 2017

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:

liform-react json schema form generator for React

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:

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.

Written by @nacmartin

blog comments powered by Disqus

» ALL POSTS