• Stars
    star
    358
  • Rank 118,855 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

react form based on json schema for form generation and validation

react-schema-form

Join the chat at https://gitter.im/networknt/react-schema-form CircleCI

npm package

React forms based on json schema for form generation and validation. This is a port of the angular schema form project using material-ui for the underlying components.

Live demo

demo

While you are trying the demo forms, you can update the schema and form in the json editor to see the instant re-rendered form. This is a way to build form interactively.

Examples

If you don't have babel-cli installed globally, please do it first.

sudo npm install -g babel-cli

Clone the project and run

cd react-schema-form
npm install
cd example
yarn
npm start

Then open localhost:8080 in a browser.

Installation

npm install react-schema-form --save

There is one added on component react-schema-form-rc-select for multiple select and dynamically loading dropdown from server. To install it.

npm install react-schema-form-rc-select --save

Usage

var { SchemaForm } = require('react-schema-form');

<SchemaForm schema={this.state.schema} form={this.state.form} model={this.props.model} onModelChange={this.props.onModelChange} />

// for example:
_onChange: function() {
    this.setState({
        schema: FormStore.getForm('com.networknt.light.example').schema,
        form: FormStore.getForm('com.networknt.light.example').form
    });
}

Examples

There are some simple forms in the demo to show how each fields to be rendered. For more real world exmaples, please check Light Framework Forms

There are still some angular schema form in this folder and migration is in progress.

If you are interested in how these forms are utilized in the framework, please take a look at a react component Form.jsx

Basically, All forms in this folder will be loaded to an Graph Database and UI is rendered by formId and form model will be validated on the browser as well as backend APIs.

Form format

React-schema-form implements the form format as defined by the json-schema-form standard.

The documentation for that format is located at the json-schema-form wiki.

Customization

react-schema-form provides most fields including FieldSet and Array and they might cover most use cases; however, you might have requirement that needs something that is not built in. In this case, you can implement your own field and inject it into the generic mapper for the builder to leverage your component. By passing a mapper as a props to the SchemaForm, you can replace built in component with yours or you can define a brand new type and provide your component to render it.

react-schema-form-rc-select is an example to provide multiple select to the react schema form.

require('rc-select/assets/index.css');
import RcSelect from 'react-schema-form-rc-select/lib/RcSelect';
...

        var mapper = {
            "rc-select": RcSelect
        };

        var schemaForm = '';
        if (this.state.form.length > 0) {
            schemaForm = (
                <SchemaForm schema={this.state.schema} form={this.state.form} model={this.state.model} onModelChange={this.onModelChange} mapper={mapper} />
            );
        }

Error Handler

The error handler is disabled by default but you can enable it by using showErrors prop on SchemaForm.

...
onValidate = () => {
    if (form is valid) {
        ...
    } else {
        this.setState({ showErrors: true });
    }
}

...
    <>
        <SchemaForm
            schema={schemaObject}
            form={formObject}
            model={modelObject}
            onModelChange={this.onModelChange}
            mapper={mapperObject}
            showErrors={this.state.showErrors}
        />
        <Button onClick={this.validate}>Submit</Button>
    </>

Contributing

See our CONTRIBUTING.md for information on how to contribute.

License

MIT Licensed. Copyright (c) Network New Technologies Inc. 2020.

More Repositories

1

light-4j

A fast, lightweight and more productive microservices framework
Java
3,608
star
2

json-schema-validator

A fast Java JSON schema validator that supports draft V4, V6, V7, V2019-09 and V2020-12
Java
821
star
3

microservices-framework-benchmark

Raw benchmarks on throughput, latency and transfer of Hello World on popular microservices frameworks
C++
702
star
4

light-oauth2

A fast, light and cloud native OAuth 2.0 authorization microservices based on light-4j
Java
312
star
5

light-example-4j

Example APIs or services to demo all feature of the light-4j framework
Java
149
star
6

light-rest-4j

A RESTful framework built on top of light-4j with both Swagger 2.0 and OpenAPI 3.0 supports
Java
119
star
7

light-eventuate-4j

An eventual consistency framework based on Event Sourcing and CQRS on top of light-4j and Kafka
Java
59
star
8

light-codegen

A code generator based on rocker that can be used as an utility or web service
Java
40
star
9

light-graphql-4j

GraphQL implementation based on light-4j
JavaScript
31
star
10

light

A lightning fast light weight Omni-Channel Application framework based on Angularjs, Undertow, RuleEngine and Orientdb
Java
31
star
11

light-saga-4j

A saga implementation to manage distributed transaction across multiple microservices
Java
22
star
12

light-workflow-4j

A state machine based light-weight workflow engine for microservices orchrestration
Java
20
star
13

light-proxy

A fast reverse proxy with an embedded gateway to wrap third-party APIs and bring them to the ecosystem of light platform
Java
16
star
14

light-rule

A rule engine or rule as a service based on Kotlin DSL
Kotlin
15
star
15

light-docker

Dockerfile and compose to bring everything up together with your APIs
TSQL
13
star
16

light-spring-boot

Spring Boot customizers that allow light-4j middleware handlers to be injected in Undertow core
Java
13
star
17

model-config

A repository contains all model definition and light-codegen config for different frameworks
Shell
11
star
18

react-schema-form-rc-select

An add-on of react-schema-form that support multiple select and a demo for extending react-schema-form with new components.
JavaScript
11
star
19

light-email

An email sender based on Kafka Streams for Event Sourcing
Java
11
star
20

json-schema-validator-perftest

A performance test project that compares networknt, fge and everit json-schema-validator
Java
10
star
21

openapi-bundler

A utility that merges multiple OpenAPI specification files into a single file with all external references resolved to local reference.
Java
10
star
22

light-hybrid-4j

A hybrid between monolithic and microservices to take advantages of both
Java
10
star
23

light-doc

The hugo documents and templates repo that will be built to https://doc.networknt.com
CSS
10
star
24

light-session-4j

Distributed session managers (Redis, Hazelcast, JDBC) that support web server cluster for light-4j framework
Java
8
star
25

openapi-parser

A light-weight, fast OpenAPI 3.0 parser and validator with minimum third party dependencies
Java
8
star
26

jsontoken

google jsontoken with gson, joda and google collection removed. Work with java8 only.
Java
8
star
27

light-bot

A microservice based DevOps agent that handles multiple repositories and dependencies
Java
7
star
28

light-scheduler

a scalable event scheduler based on transactional Kafka streams and interactive queries
Java
7
star
29

http2client-benchmark

HTTP/2 client raw benchmark against light-4j server
Java
6
star
30

light-router

A client side service mesh router designed for legacy system that cannot leverage client module
Java
5
star
31

light-config-test

Default config files of light-4j for test environment on light-config-server
JavaScript
4
star
32

light-spa-4j

Middleware handlers for Single Page Application
Java
4
star
33

light-kafka

Components that help with light-4j and Kafka integration
Java
4
star
34

light-eventuate-example

Example projects based on light-eventuate framework
Java
4
star
35

light-tram-4j

Transactional Messaging framework for message/event/command driven interaction style
Java
4
star
36

light-aws-lambda

Aws lambda extensions for cross-cutting concerns
Java
3
star
37

light-consumer-4j

Light 4J Client Framework Dependency Module
Java
3
star
38

react-file-manager

A react remote file manager with Light Framework as back end file system. This is one of the admin tools that our customers manage their static files on shared host.
3
star
39

light-gateway

A standalone gateway combined both light-router and light-proxy
Java
3
star
40

taiji-blockchain

light block chain end user and merchant components
Java
3
star
41

light-lambda-native

A Lambda native gateway with cross-cutting concerns implemented in Java
Java
3
star
42

light-example-graal

Native Java Applications with GraalVM
Java
2
star
43

light-cms

Undertow and Angularjs based light weight CMS
JavaScript
2
star
44

swagger-bundler

A utility that merges multiple swagger files into a single file with all external references resolved to local reference.
Java
2
star
45

http-sidecar

HTTP sidecar of light-mesh to provide cross-cutting concerns for Kubernetes service
Java
2
star
46

light-mesh

A service mesh implementation based on the light-proxy and light-router with SMI support
2
star
47

kafka-sidecar

Kafka sidecar of light-mesh to provide cross-cutting concerns for Kubernetes service to interact with Kafka
Java
2
star
48

lambda-market

A demo market api consists several Lambda functions
Java
2
star
49

light-tram-kafka

light-tram-4j with Kafka transactional producer and consumer only
Java
1
star
50

light-workflow

A workflow engine or workflow as a service based on Kotlin DSL
1
star
51

light-supergloo

Middleware handlers that integrate with Solo.io SuperGloo ecosystem
1
star
52

light-hash

A command line utiltity that hashes the key or password with PBKDF2WithHmacSHA1
Java
1
star
53

yaml-rule-plugin

A repo that contains all the plugins for the light-gateway request and repsonse transformer
Java
1
star
54

http-client

An HTTP client based on JDK 11 http-client to invoke APIs with client-side cross-cutting concerns addressed
Java
1
star
55

light-example-kotlin

Light-4j example services implemented in Kotlin
Kotlin
1
star
56

light-commerce

An E-Commerce plugin on top of Light Framework to give users omni-experience for online shopping
JavaScript
1
star
57

portal-view

A react light-portal UI as a template for single page applications that interact with back end APIs
JavaScript
1
star
58

maven-plugin

plugins to load rule, form and page from file system through REST APIs
Java
1
star
59

doc.maproot.net

Document site for the maproot.net application based on Hugo
CSS
1
star
60

light-rfcs

Generic request for comments related to light platform
1
star
61

light-test

Testing rules
Java
1
star
62

json-overlay

A fork of RepreZen JsonOverlay with all dependencies and code generation removed
Java
1
star
63

yaml-rule

A simple rule engine with rules defined in YAML or JSON
Java
1
star
64

lambda-petstore

A petstore demo api consists of sever Lambda functions
Java
1
star