https://github.com/bronsondunbar/library-select-component
Select component for React [NPM Package]
https://github.com/bronsondunbar/library-select-component
nodejs nodemodule react reactcomponent
Last synced: 6 months ago
JSON representation
Select component for React [NPM Package]
- Host: GitHub
- URL: https://github.com/bronsondunbar/library-select-component
- Owner: bronsondunbar
- Created: 2018-05-02T10:57:33.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T13:13:57.000Z (over 7 years ago)
- Last Synced: 2025-06-11T01:40:25.936Z (7 months ago)
- Topics: nodejs, nodemodule, react, reactcomponent
- Language: CSS
- Homepage: https://bronsondunbar.com/select-component-for-react-npm-package/
- Size: 131 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 (
{data.name}
)
})
}
```
Render the component with the functions we created, object array as well as any other props that are needed
```
render() {
return (
)
}
```
| Prop | Values |
| :---------------- | :------------------------- |
| selectOptions | Object |
| selectTheme | light or dark |
| showSelectOptions | showSelectOptions function |
| hideSelectOptions | hideSelectOptions function |
| placeHolder | String |
| selectedText | String |