library-select-component
v1.0.16
Published
Select component for React
Downloads
6
Readme
Select Component
Select component for React
Install and save component as a dependency
npm install --save library-select-component
Import component into your app
import Select from 'library-select-component'
Create an array of objects with the keys being name and id
const selectData = [
{
name: 'Item one',
id: 'one'
},
{
name: 'Item two',
id: 'two'
},
{
name: 'Item three',
id: 'three'
}
]
Create and assign active select state with empty value
constructor(props) {
super(props)
this.state = {
activeSelect: ''
}
}
Create the function that will handle the active select state
activeSelect (event) {
this.setState({ activeSelect: event.target.innerText })
}
Create the function that will show the select options
showSelectOptions (event) {
event.target.offsetParent.lastChild.classList.toggle("show");
}
Create the function that will hide the select options
hideSelectOptions (event) {
event.preventDefault();
event.target.offsetParent.classList.toggle("show");
}
Create the function that will generate the select options
selectOptions () {
const selectData = [
{
name: 'Item one',
id: 'one'
},
{
name: 'Item two',
id: 'two'
},
{
name: 'Item three',
id: 'three'
}
]
return selectData.map((data) => {
return (
<a
className="dropdown-item"
key={data.id}
onMouseUp={this.hideSelectOptions.bind(this)}
onClick={this.activeSelect.bind(this)} >
{data.name}
</a>
)
})
}
Render the component with the functions we created, object array as well as any other props that are needed
render() {
return (
<Fragment>
<Select
selectOptions={this.selectOptions()}
selectTheme="dark"
showSelectOptions={this.showSelectOptions.bind(this)}
placeHolder="Please select..."
selectedText={!this.state.activeSelect ? null : this.state.activeSelect} />
</Fragment>
)
}
| Prop | Values | | :---------------- | :------------------------- | | selectOptions | Object | | selectTheme | light or dark | | showSelectOptions | showSelectOptions function | | hideSelectOptions | hideSelectOptions function | | placeHolder | String | | selectedText | String |