React-datalist is an attempt at making a <datalist>
polyfill as a reusable react module.
Feedback in the form of issues and pull-requests is very much appreciated!
Check out the DEMO
PS! For use with react@0.12 or earlier, user react-datalist@1.3.1. 2.0.0 support react@0.13.0 and newer.
npm install react-datalist
var React = require('react')
var ReactDatalist = require('react-datalist')
var options = ['apple','orange','pear','pineapple','melon']
React.render(<ReactDatalist list="fruit" options={options} />, document.body)
list * - <datalist id="list"> and <input list="list">
options * - the available options
placeholder - a placeholder for the input field
forcePoly - always use the polyfill (default false)
blurTimeout - timeout after blur before hinding opts (default 200ms)
autoPosition - automatically position the options list (default true)
initialFilter - set the initial input value (default '')
hideOptionsOnEsc - hide options on esc (default true)
hideOptionsOnBlur - hide options on input blur (default true)
includeLayoutStyle - include internal layout styling (style tag) (default true)
onOptionSelected - callback triggered when option is considered selected
getController - pass a function to collect a controller object (see below)
* = required
The getController property is there to enable external control of the componentโs inner state - while keeping the state in sync. It takes a function that will return a controller object.
getController : function(controller) { /* ... */ }
The controller offers the following
controller.setFilter(string, callback) - sets the value of the input
controller.toggleOptions(callback) - toggle show/hide of options. shown bool passed to callback.
controller.getState() - gets the current inner state
controller.setState(newState, callback) - set a new inner state
React-datalist includes both a input and a datalist element. In order to stay fairly simple to use, align with react and avoid native events and other trickery, this was necessary. The structure is as follows:
// Native
<div class="react-datalist-container">
<input class="react-datalist-input">
<datalist class="react-datalist">
<option value="values">
</datalist>
</div>
// Polyfill
<div class="react-datalist-container">
<input class="react-datalist-input">
<div class="react-datalist">
<div class="react-datalist-option">values</div>
</div>
</div>
If you need to interact with the input element, attach listeners like onInputChange, onInputBlur, etc. (Note to self: expose additional input events. Note to others: encourage by creating issues)
There is also some (quite useful) styling you can/should use. You can find it under node_modules/react-datalist/react-datalist.styl. If you donโt use stylus itโs pretty small and easy to copy. I might include it if I pack up a UMD module for React-datalist. Anyone want that? Create an issue :-)
(Note to self: Convert styling to plain css)
(Idea: Should I pack a commonjs module that include the styling?)
The module itself does not make us of JSX as not to impose restrictions on the user.
For a full feature list check out the spec.
enjoy.
Author: asbjornenge
Source Code: https://github.com/asbjornenge/react-datalist
#react #reactjs #javascript