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.
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
- 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
getorpostrequest - Dynamic dropdown values enriched on the API server when schema/form is loaded.
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.
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}} />
);
}
For more detailed document, please visit the networknt document site
See our CONTRIBUTING.md for information on how to contribute.
MIT Licensed. Copyright (c) Network New Technologies Inc. 2016-2020.