Skip to content
Generate forms from JSON Schema to use with React (& redux-form)
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Fix case sensitive path Dec 14, 2017
src Merge pull request #42 from tapetersen/master Dec 6, 2018
.babelrc Use individual lodash modules Dec 7, 2017
.eslintignore [validation] fixed optimised the validation and error display Oct 11, 2017
.eslintrc Re-lint Dec 1, 2017
.gitignore Examples from the documentation Dec 1, 2017
.npmignore added .npmignore Sep 13, 2016
.travis.yml Updated node requirements in .travis.yml Dec 1, 2017
LICENSE Can render a form Jun 4, 2016
README.md Better examples Dec 1, 2017
package.json Move jest to devDependencies Nov 21, 2018
webpack.config.js Removed dummy example Dec 1, 2017

README.md

liform-react

tests

Library for generating React forms from JSON schema using the fantastic redux-form.

https://limenius.github.io/liform-react/

Installation

npm install liform-react --save

Basic usage

import React from 'react';
import ReactDOM from 'react-dom';

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
})

var schema = {
    "title":"my form",
    "properties":
        {
            "name": { "type":"string","title":"Model", "default": "Ziummmm"},
            "description": { "type":"string", "title": "Description", "widget": "textarea" }
        },
        "required":["name"]};

const store = (window.devToolsExtension ? window.devToolsExtension()(createStore) : createStore)(reducer)

const showResults = values => {
    window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`)
}

const dest = document.getElementById('form-holder')

ReactDOM.render(
    <Provider store={store}>
        <Liform schema={schema} onSubmit={showResults}/>
    </Provider>,
    dest
)

And, provided that you have a <div id="form-holder">, you should see something like this:

Running the Examples

To run the examples in doc/pages/examples, clone this repository, then run:

npm install
webpack

cd doc/pages/examples/simple # (for instance)
node server.js

Material UI

There is a promising work on a theme for Material UI done by samuelbriole

You can’t perform that action at this time.