react-select-element
v2.8.0
Published
React Select Element
Downloads
1,168
Readme
react-select-element
React Select Element
react-select-element
implements standard HTML
<select />
behaviour, without using any <form />
elements. (It can, of course, be composed into other components which implement them.)
You can use it as-is, in which case, there is a Class component (using setState
) or a Hooks function component (using Hooks' useState
). In the former case, you can extend
your own components from it, modifying its behaviour to suit your needs.
There are Storybooks!
npm run storybook
Or, an example implementation is available on GitHub.
While the component appends some className
attributes to its elements, the package does not contain any CSS
stylesheets. The example implementation contains a simple stylesheet which can help you start your own.
Using ES
The Class component is the default export.
import Select from 'react-select-element'
You can explicitly import the Class component:
import Select from 'react-select-element/class'
Or explicitly import the Hooks function component:
import Select from 'react-select-element/hooks'
Using JS
The Class component is the default export.
const Select = require('react-select-element')
To explicitly import the Class component:
const Select = require('react-select-element/class')
To explicitly import the Hooks component:
const Select = require('react-select-element/hooks')
Implementing in React
Either:
<Select
index={this.state.index}
onChange={(index) => {
this.setState({ index })
}}
tabIndex={0}
accessKey='S'
options={[
{ text: 'Letter A' },
{ text: 'Letter B' },
{ text: 'Letter C' },
{ text: 'Letter D' },
{ text: 'Letter E' }
]}
/>
Or:
<Select
defaultIndex={0}
tabIndex={0}
accessKey='S'
options={[
{ text: 'Letter A' },
{ text: 'Letter B' },
{ text: 'Letter C' },
{ text: 'Letter D' },
{ text: 'Letter E' }
]}
/>
Otherwise:
<Select
disabled
/>
Finally:
<Select
readOnly
/>
Extending the component
1. <InfiniteSelect />
In standard behaviour, when the options are visible, the user can move up and down through the options list by pressing the "arrow up" and "arrow down" keys on their keyboard. Movement will stop at the first item or the last item.
You want to modify that behaviour.
By pressing the "arrow up" key, the user should move through each item to the first item in the list; then, by pressing again, they should move to the last item.
Similarly, by pressing the "arrow down" key, the user should move through each item to the last item in the list; then, pressing again, they should move to the first item.
To achieve this, you can extend
the component and override two of its methods.
class InfiniteSelect extends Select {
incrementActiveIndex () {
const { activeIndex } = this.state
const incremented = activeIndex + 1
this.activeIndex(
(incremented > this.upperBound) ? this.lowerBound : incremented
)
}
decrementActiveIndex () {
const { activeIndex } = this.state
const decremented = activeIndex - 1
this.activeIndex(
(decremented < this.lowerBound) ? this.upperBound : decremented
)
}
}
There are Storybooks!
npm run storybook
Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Infinite Select Component
.
2. <SelectSelect />
In standard behaviour, controlling components are only notified of a change to the selected index
on click
or keyboard enter
events.
You want to modify that behaviour.
You want controlling components to be notified of a change whenever the the "arrow up" or "arrow down" keys are pressed. (In effect, each option is selected when the user moves through the list.)
To achieve this, you can extend the component and modify the same two methods as before.
class SelectSelect extends Select {
incrementActiveIndex () {
super.incrementActiveIndex()
const { activeIndex } = this.state
this.selectIndex(
Math.min(activeIndex + 1, this.upperBound)
)
}
decrementActiveIndex () {
super.decrementActiveIndex()
const { activeIndex } = this.state
this.selectIndex(
Math.max(activeIndex - 1, this.lowerBound)
)
}
}
Invoking super.incrementActiveIndex()
or super.decrementActiveIndex()
in the overriding method ensures that existing behaviour remains unchanged, while the additional statements modify the behaviour of the component.
There are Storybooks!
npm run storybook
Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Select Select Component
.
3. <HiddenSelect />
react-select-element
does not use any <form />
elements.
You want to compose it into a <form />
.
In this case, you've chosen to compose the <Select />
into a controlling component which renders the text
of the selected option into the value
attribute of an <input type='hidden' />
element.
function DEFAULT_HANDLE_CHANGE () {
//
}
class HiddenSelect extends Component {
state = {}
handleIndexChange = (index) => {
const { options = [], onChange = DEFAULT_HANDLE_CHANGE } = this.props
const { text } = options[index]
this.setState({ value: text })
onChange(index)
}
render () {
const { value } = this.state
return (
<div className='hidden-select'>
<Select
{...this.props}
onChange={this.handleIndexChange}
/>
<input name='hidden-select' type='hidden' value={value} />
</div>
)
}
}
HiddenSelect.propTypes = {
...Select.propTypes
}
There are Storybooks!
npm run storybook
Or, an example implementation is available on GitHub. Clone that repository, install and start the package, then look for the example titled Hidden Select Component
.