1.0.8 • Published 5 years ago
preact-material-autocompleter v1.0.8
Preact Material Index
A material-design autocompleter with a dropdown. Simple to set up and use along with preact.
You can also find this as an npm package here.
Options
| Option | Description | Required |
|---|---|---|
| items | The list of items that should be displayed to the user in the dropdown. Must be a list of strings. | Yes |
| className | The name of the outer-most container class | No |
| allowAddNewItems | A flag indicating whether or not the user is allowed to add items | No |
| hintText | A string describing what the user is choosing | No |
| id | The id of the underlying TextField | No |
| onChange | A callback function that is called when the user selects a value from the dropdown | No |
Examples
Example 1
Render the autocompleter with three items; 'one', 'two' and 'three' and without the possibility to add options.
import AutoCompleter from 'preact-material-autocompleter';
export default class App extends Component {
render() {
return (
<div id="app" >
<AutoCompleter items={['one', 'two', 'three']}
onChange={e => console.log('You selected ' + e.target.value)} hintText="Select an item"
/>
</div>
);
}
}Example 2
Render the autocompleter with three items; 'one', 'two' and 'three' and allow users to add items.
import AutoCompleter from 'preact-material-autocompleter';
export default class App extends Component {
render() {
return (
<div id="app" >
<AutoCompleter items={['one', 'two', 'three']}
onChange={e => console.log('You selected' + e.target.value)} hintText="Select an item"
allowAddNewItems
/>
</div>
);
}
}