networknt/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.

react-schema-form-rc-select

The RcSelect is an add-on of react-schema-form, and it supports both single and multiple select with async retrieval data from the Internet APIs. It is a demo for extending react-schema-form with new components externally.

It is a react-schema-form field component that wraps around rc-select

Features

1. Single select or multiple select with an option to add new items
2. Static dropdown values defined in schema or form
3. Dynamic dropdown values in JSON format load from the same server or Internet by get or post request
4. Dynamic dropdown values enriched on the API server when schema/form is loaded.

Live demo

To run the example locally

Clone the project and run

git clone https://github.com/networknt/react-schema-form-rc-select.git
cd react-schema-form-rc-select/example
npm install
npm start

A browser tab will be automatically opened with http://localhost:3000.

Installation

npm install react-schema-form-rc-select

This module is an extension of react-schema-form, and it must be called from react-schema-form to handle rc-select form type. It shows how to customize the react-schema-form to add a new field and map a new form type to it. Please see App.js in the example folder for the details.

import RcSelect from "react-schema-form-rc-select";
...

        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={{"rc-select": RcSelect}} />
            );
        }

Documentation

For more detailed document, please visit the networknt document site

Contributing

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

License

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