Awesome

The rc-select is replaced by the DynaSelect in the react-schema-form implemented with Autocomplete.

The concept of extending the react-schema-form without touching the source repo still works and it is demo in the repo. However, it looks like the effort is not adjustable. If someone wants to add now form component, please submit a PR in the react-schema-form.

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

Single select or multiple select with an option to add new items
Static dropdown values defined in schema or form
Dynamic dropdown values in JSON format load from the same server or Internet by get or post request
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.