rjsf-autosuggest
This package connects react-autosuggest to react-jsonschema-form. A live demo of everything shown here can be viewed on this projects github page.
Basic Usage
Install with yarn add rjsf-autosuggest
, import, and add Autosuggest to the uiSchema for any field. This will work normally with the enum and enumNames of react-jsonschema-form to make an autocomplete widget.
const schema =type: 'object'properties:pokemon:type: 'string'title: 'Choose your pokemon'enum: pokemonconst uiSchema =pokemon:'ui:widget': Autosuggest'ui:options':// any options here will be passed to react-autosuggestconst PokemonForm = {return<Form schema=schema uiSchema=uiSchema}
Allow Custom Calues
react-autosuggest
doesn't forbid custom values by default, but rjsf's enum forces the value to be one of the designated choices. To fix this use uiSchema['ui:options'].choices
instead of schema.enum
.
const schema =type: 'object'properties:pokemon:type: 'string'title: 'Choose a pokemon (or whatever)'const uiSchema =pokemon:'ui:widget': Autosuggest'ui:options':choices: pokemon
Advanced usage
This component acts mostly as a pass-through for react-autosuggest
. Theoretically any props can be passed through via uiSchema[field_name]['ui:options']
for complete control of the autosuggest component. For example, to render more than just the label of the suggestion.
const uiSchema =pokemon:'ui:widget': Autosuggest'ui:options':// all properties other than enumOptions (from schema) will be passed into Autosugest{const className =AutosuggestconfigcssisHighlighted ? 'activeItem' : 'item'const match = pokemonreturn<div className=className><span className="mr-2">#matchid</span><span className="mr-2">label</span>matchtype</div>}
Overriding more complicated behavior could be difficult because they use the internal state of the component. Feel free to open an issue if you have trouble overriding other attributes. If you want to override more functionality, I recommend copying src/index.js of this project and modifying it directly (it's actually much shorter than this README).
Styling
In the custom of react-jsonschema-form
I used bootstrap syntax for the form components styling. Additionally, there are some custom class names on react-autosuggest
which cannot be changed. Look at bootstrap.css for the minimum number of changes necessary to make this work with stock bootstrap v4.
If you want to override the classNames, there is a Autosuggest.config.css
object which can be modified. Below are the default values (so this example is a no-op).
Autosuggestconfigcss =input: 'form-control'container: 'list-group'item: 'list-group-item list-group-item-action'activeItem: 'list-group-item list-group-item-action active'
If you have trouble debugging style (because the menu closes when using the element inspector), I recommend adding the following attributes to force the menu to stay open.
const uiSchema = { pokemon: { 'ui:options': { alwaysRenderSuggestions: true, onSuggestionsClearRequested: () => {}, } } }