All Projects → Limenius → Liform React

Limenius / Liform React

Licence: mit
Generate forms from JSON Schema to use with React (& redux-form)

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Liform React

Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+7443.11%)
Mutual labels:  validation, forms, redux-form
Play2 Html5tags
HTML5 form tags module for Play Framework
Stars: ✭ 101 (-39.52%)
Mutual labels:  validation, forms
React Native Merlin
🧙 Simple web-like forms in react native.
Stars: ✭ 83 (-50.3%)
Mutual labels:  validation, forms
Class Validator Jsonschema
Convert class-validator-decorated classes into JSON schema
Stars: ✭ 118 (-29.34%)
Mutual labels:  json-schema, validation
Laravel Multistep Forms
Responsable Multistep Form Builder for Laravel
Stars: ✭ 76 (-54.49%)
Mutual labels:  validation, forms
Wtforms
A flexible forms validation and rendering library for Python.
Stars: ✭ 1,214 (+626.95%)
Mutual labels:  validation, forms
Liform
PHP library to render Symfony Forms to JSON Schema
Stars: ✭ 113 (-32.34%)
Mutual labels:  json-schema, forms
Formik Alicante
Formik slides & demos from React Alicante
Stars: ✭ 47 (-71.86%)
Mutual labels:  validation, forms
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121 (-27.54%)
Mutual labels:  forms, redux-form
Liformbundle
Symfony Bundle to render Symfony Forms to JSON Schema
Stars: ✭ 124 (-25.75%)
Mutual labels:  json-schema, forms
Aptos
☀️ A tool for validating data using JSON Schema and converting JSON Schema documents into different data-interchange formats
Stars: ✭ 144 (-13.77%)
Mutual labels:  json-schema, validation
Form Object
Form object to use with Vue components for sending data to a Laravel application using axios.
Stars: ✭ 73 (-56.29%)
Mutual labels:  validation, forms
Schemasafe
A reasonably safe JSON Schema validator with draft-04/06/07/2019-09 support.
Stars: ✭ 67 (-59.88%)
Mutual labels:  json-schema, validation
React Inform
Simple controlled forms with validations in react
Stars: ✭ 81 (-51.5%)
Mutual labels:  validation, forms
Awesomevalidation
Android validation library which helps developer boil down the tedious work to three easy steps.
Stars: ✭ 1,093 (+554.49%)
Mutual labels:  validation, forms
React Jsonschema Form
A React component for building Web forms from JSON Schema.
Stars: ✭ 10,870 (+6408.98%)
Mutual labels:  json-schema, forms
Redux Form Validators
redux-form-validators
Stars: ✭ 152 (-8.98%)
Mutual labels:  validation, redux-form
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+3960.48%)
Mutual labels:  validation, forms
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-76.05%)
Mutual labels:  validation, forms
Vue Formulate
⚡️ The easiest way to build forms with Vue.
Stars: ✭ 1,947 (+1065.87%)
Mutual labels:  validation, forms

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].