ListBox
basic usage
<ListBox>
<ListBoxOption>
Apple
</ListBoxOption>
<ListBoxOption>
Orange
</ListBoxOption>
<ListBoxOption>
Strawberry
</ListBoxOption>
<ListBoxOption>
Banana
</ListBoxOption>
</ListBox>
using tag prop
<React.Fragment>
<div>This is an ordered list!</div>
<ListBox tag="ol">
<ListBoxOption tag="li">
Apple
</ListBoxOption>
<ListBoxOption tag="li">
<div>Orange</div>
</ListBoxOption>
<ListBoxOption tag="li">
Strawberry
</ListBoxOption>
<ListBoxOption tag="li">
Banana
</ListBoxOption>
</ListBox>
</React.Fragment>
using onSelect prop
class ListBoxWrapperForOnSelect extends React.Component {
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
this.state = {
selectedOption: null,
selectedOptionIndex: null,
};
this.fruits = {
Apple: '🍎',
Orange: '🍊',
Strawberry: '🍓',
Banana: '🍌',
};
}
onSelect(option, index) {
this.setState({
selectedOption: option,
selectedOptionIndex: index,
});
}
getSelectedFruitEmoji(fruit) {
return fruit ? this.fruits[fruit] : '';
}
render() {
const children = Object.keys(this.fruits).map((fruit, index) => (
<ListBoxOption
key={fruit}
onSelect={() => this.onSelect(fruit, index)}
style={{ textAlign: 'center' }}
>
{fruit}
</ListBoxOption>
));
return (
<React.Fragment>
<span aria-live="polite">
Selected Fruit:
{this.state.selectedOptionIndex === undefined ? (
<span className="sr-only">none</span>
) : (
<span
arialabelledby={`list-box-option-${
this.state.selectedOptionIndex
}`}
>
{this.getSelectedFruitEmoji(this.state.selectedOption)}
</span>
)}
</span>
<ListBox style={{ width: '200px' }}>
{children}
</ListBox>
</React.Fragment>
);
}
}
using selectedOptionIndex prop
class ListBoxWrapperForSelectedOptionIndex extends React.Component {
constructor(props) {
super(props);
this.onSelect = this.onSelect.bind(this);
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
reset: true,
};
this.fruits = Object.keys({
Apple: '🍎',
Orange: '🍊',
Strawberry: '🍓',
Banana: '🍌',
});
}
onButtonClick() {
this.setState({
reset: true,
});
}
onSelect() {
this.setState({
reset: false,
});
}
render() {
const children = this.fruits.map(fruit => (
<ListBoxOption
key={fruit}
onSelect={this.onSelect}
style={{ textAlign: 'center' }}
>
{fruit}
</ListBoxOption>
));
return (
<React.Fragment>
<Button variant="primary" onClick={this.onButtonClick}>
Click me to reset your selected fruit!
</Button>
<ListBox
selectedOptionIndex={this.state.reset ? null : undefined}
style={{ margin: '10px' }}
>
{children}
</ListBox>
</React.Fragment>
);
}
}