react-easy-select
v0.0.4
Published
An ES6 react html select element, allowing entry of other values and with inline styles
Downloads
9
Readme
react-easy-select
A react component that provides a simple native HTML <select>
element which can also allow the user to enter values not in the dropdown list and supports inline styles.
Demo
http://colinf.github.io/react-easy-select/
Installation
Install into your project using NPM in the usual way. For example:
npm install --save-dev react-easy-select
Example Usage
React.render(
<EasySelect name='ex1'
options={teams}
value={teams[1]}
onChange={handleChange}/>,
document.getElementById('ex1')
);
function handleChange(change) {
if (change.isNewValue) {
FluxActions.newTeamAdded(change.target.value);
}
}
Properties
- options: React.PropTypes.array.isRequired
- name: React.PropTypes.string
- value: React.PropTypes.string
- styles: React.PropTypes.object
- allowBlank: React.PropTypes.bool
- allowOtherValues: React.PropTypes.bool
- noButtons: React.PropTypes.bool
- onChange: React.PropTypes.func
options
An array of strings being the options to appear in the dropdown list of the select. Each elements of the array can be either of 2 formats:
- a string e.g.
"Celtic"
- an object e.g.
{value: "Celtic, text: "Celtic Football Club"}
The above options will result in the following <option>
elements respectively:
<option value="Celtic">Celtic</option>
<option value="Celtic">Celtic Football Club</option>
If the data being entered using your select element if optional and so you wish to include a blank value in the dropdown list, there is no need to add this to your options array. See allowBlank below.
name
This string will be used for the name attribute of the HTML element that is rendered.
value
This string is the value to be selected in the dropdown list.
styles
An object containing styles to be used to supplement/override the default styles. Should use the React inline styles format. The supported keys in the object are shown below:
let styles = {
easySelect: {
// styles for the surrounding div of the easy-select component
},
select: {
// styles for the <select> element
},
input: {
// styles for the <input> element (entry of new values)
},
confirmButton: {
// styles for the confirm button (to confirm new value)
},
cancelButton: {
// styles for the cancel button (to cancel new value entry)
}
};
allowBlank
A boolean. If true
then a blank entry is added at the start of the dropdown list. This allows the value to be reset to be blank by the user where required.
allowOtherValues
A boolean. If true
then an Other... entry is added to the end of the dropdown list. Selecting this display an input text field to enter a value not in the dropdown.
noButtons
A boolean. If set to true
then no confirm/cancel buttons will be displayed when entering an Other... value. The user can confirm or cancel using the Enter or Escape key respectively.
onChange
A handler function to be called when the selected value is changed. The function will be passed a single object in the form:
{
target: // the <select> or <input> DOMElement as appropriate
isNewValue: // boolean, true if target.value is new
}