react-autocomplete (combobox)
WAI-ARIA accessible React autocomplete component (combobox).
This implementation is almost entirely derived from rpflorence/react-autocomplete, but has changed enough to earn its own repo. But it's totally a WIP and shouldn't be used for production yet.
Installation
npm install react-combobox
WIP
This is not production ready, but I welcome use-cases opened in the issues :)
Demo
http://rackt.github.io/react-autocomplete/example/
Usage
var Autocomplete = ; // its actually called a combobox, but noboby searches for thatvar Combobox = AutocompleteCombobox;var Option = AutocompleteOption; var comboboxinItUp = // Just like <select><option/></select>, this component is a // composite component. This gives you complete control over // What is displayed inside the <Option>s as well as allowing // you to render whatever you want inside, like a "no results" // message that isn't interactive like the <Options> are. // Start with the <Combobox/> and give it some handlers. <Combobox onInput=handleInput onSelect=handleSelect autocomplete="both" > // `onInput` is called when the user is typing, it gets passed the // value from the input. This is your chance to filter the Options // and redraw. More realistically, you'd make a request to get data // and then redraw when it lands. // // `onSelect` is called when the user makes a selection, you probably // want to reset the Options to your full dataset again, or maybe // deal with the value and then clear it out if this is used to // populate a list. // // `autocomplete` defaults to 'both'. 'inline' will autocomplete the // first matched Option into the input value, 'list' will display a // list of choices, and of course, both does both. // When this option is selected, `onSelect` will be called with the // value `"foo"`. <Option value="foo">Foo</Option> // `label` is the text to display in the input when the Option is // selected. It defaults to the content of the Option just like a // real <option>. (Maybe the value should too, now that I'm writing // this, but it doesn't yet) <Option value="bar" label="not bar at all">Bar</Option> </Combobox>;
This is not realistic code, check out the examples directory for a real implementation.