README
Selectly
Build custom select menus in React. Provides a low level way to build the select menu you need.
Install
npm install selectly --save
bower install selectly --save
Example Usage
import { Select, Trigger, OptionList, Option, utils } from 'Selectly'
const { getToggledValues } = utils
class MultiSelect extends Component {
constructor(props) {
super(props)
this.state = {
defaultValue: 'Select a color',
currentValues: []
}
}
_handleChange(value) {
this.setState({
currentValues: getToggledValues(this.state.currentValues, value)
})
}
render() {
const { defaultValue, currentValues } = this.state
return (
<Select
multiple
onChange={value => this._handleChange(value)}
>
<Trigger>
{ currentValues.length > 0
? currentValues.join(', ')
: defaultValue
}
</Trigger>
<OptionList tag="ul" className="react-select-menu">
<Option value="red">Red</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</OptionList>
</Select>
)
}
}
Select Props
: PropTypes.node.isRequired (Accepts 2 children) children
The first child is used as the trigger
and the second child is used as the options
that will be displayed upon clicking the trigger.
: PropTypes.bool multiple
When true
this allows multiple options to be selected.
: PropTypes.bool disabled
Puts the select menu in a disabled state.
: PropTypes.bool autoWidth
Determines if the options
should be the same width as the trigger
.
: PropTypes.func onChange
Callback when an option has been selected. Passes back the value that was selected.
React ARIA Components
Trigger
, OptionList
, and Option
are exported directly from React ARIA
Utilities
: (array options) buildOptionsLookup
Returns a flat object to allow optgroup options to be accessed easier.
[
{ label: 'Dogs', optgroup: [
{ value: 'frenchy', label: 'French Bulldog' },
{ value: 'pit-bull', label: 'Pit Bull' }
]},
{ label: 'Cats', optgroup: [
{ value: 'munchkin', label: 'Munchkin' },
{ value: 'persian', label: 'Persian' }
]}
]
turns into
{
'frenchy': { value: 'frenchy', label: 'French Bulldog' },
'pit-bull': { value: 'pit-bull', label: 'Pit Bull' },
'munchkin': { value: 'munchkin', label: 'Munchkin' },
'persian': { value: 'persian', label: 'Persian' }
}
: (object options) getAllValues
Returns an array of all option values.
: (object prevValues, [array, string] nextValues) getToggledValues
Returns a new array of values either added or removed.
: (object options, [array, string] currentValue) getCurrentOptions
Returns an array of the current option or options.
: ([array, string] currentValue, string value) isOptionSelected
Determines if value
exists in or matches currentValue
. Returns true
or false
.
Run Example
clone repo
git clone git@github.com:souporserious/selectly.git
move into folder
cd ~/selectly
install dependencies
npm install
run dev mode
npm run dev
open your browser and visit: http://localhost:8080/