https://github.com/brnrdog/listboxkit
Light and flexible React hooks written in ReScript for building accessible listbox composed components, like menus, dropdown select and others.
https://github.com/brnrdog/listboxkit
bucklescript listbox react reason-react rescript
Last synced: 9 months ago
JSON representation
Light and flexible React hooks written in ReScript for building accessible listbox composed components, like menus, dropdown select and others.
- Host: GitHub
- URL: https://github.com/brnrdog/listboxkit
- Owner: brnrdog
- License: mit
- Created: 2020-09-05T16:45:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-12T11:13:20.000Z (over 3 years ago)
- Last Synced: 2025-04-01T07:38:57.677Z (10 months ago)
- Topics: bucklescript, listbox, react, reason-react, rescript
- Language: ReScript
- Homepage: https://brnrdog.github.io/listboxkit/
- Size: 1.29 MB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# listboxkit
[](https://www.npmjs.com/package/listboxkit)
[](https://bundlephobia.com/result?p=listboxkit)
Light and flexible React hooks written in ReScript for building accessible listbox composed components, like menus, dropdown select and others.
## Installation
Install it using the package manager of your preference:
```bash
npm install --save listboxkit
```
Or if your project uses yarn:
```bash
yarn add listboxkit
```
For **ReScript** projects, add `listboxkit` as a dependency in your `bsconfig.json` file:
```json
{
"bs-dependencies": ["listboxkit"]
}
```
## Usage
The main React hook for building listbox components is the `useListbox`. Given a list of options, this hook will provide the state and the necessary event handlers for building your listbox.
### Using in JavaScript/TypeScript projects:
```js
const options = ["Red", "Green", "Blue"];
function ColorSelect() {
const {
highlightedIndex,
getOptionProps,
getContainerProps,
selectedIndexes
} = useListbox(options);
const selectedColors = selectedIndexes.map(i => options[i]).join(",")
return (
Selected color:{" "}
{selectedColors.length === 0 ? "no selected color" : selectedColors}.
{options.map((option, index) => {
const highlighted = highlightedIndex === index;
return (
-
{highlighted ? `> ${option}` : option}
);
})}
);
```
### Using in ReScript projects:
```rescript
module ColorSelect {
let options = ["Red", "Green", "Blue"]
@react.component
let make = () => {
let {
highlightedIndex,
getOptionProps,
getContainerProps,
selectedIndexes
}: Listbox.listbox = Listbox.useListbox(options)
let { role, tabIndex, onKeyDown, onFocus, onBlur } = getContainerProps()
let selectedOption = selectedIndexes
-> Belt.Array.map(i => options -> Belt.Array.get(i))
-> Belt.Array.get(0)
-> Belt.getWithDefault("no selected color.")
let renderColorOption = (index, option) => {
let {
ariaSelected,
onClick,
role,
}: Listbox.optionProps = getOptionProps(index)
let highlighted = highlightedIndex == index
{(highlighted ? `> ${option}` : option) |> React.string}
}
{React.string("Selected color :" ++ selectedOption)}
{options
-> Belt.Array.mapWithIndex(renderOption)
-> React.array}
}
}
```