Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mitchbne/react-listbox
A React implementation to the Listbox found at https://github.com/tailwindlabs/tailwindui-vue
https://github.com/mitchbne/react-listbox
Last synced: 3 days ago
JSON representation
A React implementation to the Listbox found at https://github.com/tailwindlabs/tailwindui-vue
- Host: GitHub
- URL: https://github.com/mitchbne/react-listbox
- Owner: mitchbne
- License: mit
- Created: 2020-08-14T06:35:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-01-02T11:40:03.000Z (almost 4 years ago)
- Last Synced: 2023-03-06T22:58:48.175Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://react-listbox.vercel.app
- Size: 762 KB
- Stars: 20
- Watchers: 1
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Listbox
A React implementation to the Vue Listbox component designed by TailwindLabs
---
React Listbox is a context driven component system that allows developers to create a Listbox built with React.
Personally, I use a CSS framework called TailwindCSS created by the team at TailwindLabs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
Recently the developers at TailwindLabs implemented a Listbox component API (just like this one) built for Vue developers. They promised that they would begin working on a React implementation of the Listbox soon, but I couldn't wait. In the meantime I've created this solution, maybe it will help you too.
Made with love ❤️
_**Note: This solution comes completely unstyled. You will need to style it yourself.**_
### Demo
https://react-listbox.vercel.app
### Getting Started
This package is meant to work alongisde any React application. Simply add the package to your list of dependencies, and make awesome projects 😎.
```bash
yarn add @mitchbne/react-listbox
```
### To Do
- [x] Create a JSX replication of TailwindLab's Vue Listbox solution.
- [x] Add Typescript support for components.
- [x] Turn the components into an installable library.
- [x] Home (key) moves the focus and activeItem to the first option.
- [x] End (key) moves the focus and activeItem to the last option.
- [x] Selects/focus the first selected option when opened (`if activeItem == null`)
- [x] Create a multi-select solution.
- [x] Multi selects focus the first selected option when opened
- [x] Shift + Down Arrow: Moves focus to and toggles the selected state of the next option.
- [x] Shift + Up Arrow: Moves focus to and toggles the selected state of the previous option.
- [x] Shift + Space: Selects contiguous items from the most recently selected item to the focused item.
- [x] Control + Shift + Home: Selects the focused option and all options up to the first option. Optionally, moves focus to the first option.
- [x] Control + Shift + End: Selects the focused option and all options down to the last option. Optionally, moves focus to the last option.
- [x] Control + A: Selects all options in the list. Optionally, if all options are selected, it may also unselect all options.
- [ ] Add support for the ListboxList component to be a React Portal.
- [ ] Handle disabled ListboxOption
- [ ] Create an input-filter solution.
### Basic Example
```jsx
import React, { useState, Fragment } from "react"
import { Listbox, ListboxLabel, ListboxButton, ListboxList, ListboxOption } from "@mitchbne/react-listbox"
export const SelectMenu = () => {
const [selectedOption, setSelectedOption] = useState("Option 1")
const options = [
"Option 1",
"Option 2",
"Option 3",
]
return (
Select an option:
{ selectedOption ? selectedOption : "Select an option" }
{ options.map(option => (
{option}
))}
)}
)}
)
}
```
### TailwindCSS Example
```jsx
import React, { useState, Fragment } from "react"
import { Listbox, ListboxLabel, ListboxButton, ListboxList, ListboxOption } from "@mitchbne/react-listbox"
export const SelectMenu = () => {
const [selectedWrestler, setSelectedWrestler] = useState("Ric Flair")
const wrestlers = [
"Stone Cold Steven Austin",
"Bret Hart",
"Ric Flair",
"Macho Man Randy Savage",
"Jake The Snake Roberts",
"The Undertaker",
"Hulk Hogan",
"Rikishi",
"John Cena",
"Shawn Micahels",
"British Bulldog",
"Superfly Jimmy Snuka",
"The Ultimate Warrior",
"Andre The Giant",
"Doink The Clown",
]
return (
{({ isOpen }) => (
Select a wrestler:
{({ isFocused }) => (
{ selectedWrestler ? selectedWrestler : "Select a wrestler" }
)}
{isOpen && (
{ wrestlers.map(wrestler => (
{({ isActive, isSelected }) => (
{wrestler}
{ isSelected && (
)}
)}
))}
)}
)}
)
}
export default null
```
### Advanced TailwindCSS Example
```jsx
import React, { useState, Fragment } from "react"
import { Listbox, ListboxLabel, ListboxButton, ListboxList, ListboxOption } from "@mitchbne/react-listbox"
export const AlternativeSelectMenu = (): React.ReactNode => {
const [selectedPersonId, setSelectedPersonId] = useState("2f8807fd-f9ec-4b52-ad01-51f9d714e3d2")
const people = [
{
"id": "5bbb4afc-d23d-4f33-b84a-251f0aafe8d4",
"name": "Mr. Louisa Durgan",
"avatar": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "807e05d8-0896-42e0-9f9f-12c493be0da5",
"name": "Maudie Collier II",
"avatar": "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "2f8807fd-f9ec-4b52-ad01-51f9d714e3d2",
"name": "Torrance Kuvalis",
"avatar": "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "7b90f1de-cd62-4cef-84ea-9900dc42ff94",
"name": "Ansley Ferry",
"avatar": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
},
{
"id": "387416e6-dcd0-4acc-a33b-1a3045bbd00c",
"name": "Tyree Ortiz",
"avatar": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "8a8b98b5-52d7-4480-9983-1f09f9e0bd5b",
"name": "Maxwell Predovic II",
"avatar": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "e800caed-40e5-47b1-be64-da445f78c395",
"name": "Frederik Bernhard",
"avatar": "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "35a46ffa-0622-44a9-b3dc-52554ca37be6",
"name": "Mr. Aaliyah Parisian",
"avatar": "https://images.unsplash.com/photo-1568409938619-12e139227838?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "0607c49a-140e-42c8-96c0-cb92347b1da7",
"name": "Fidel Keebler",
"avatar": "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "7a929850-dfb3-4746-bdcb-3d708c63df99",
"name": "Rosalind Monahan",
"avatar": "https://images.unsplash.com/photo-1584486520270-19eca1efcce5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
},
{
"id": "dbea32bc-27da-4651-a7e9-9d0bc2616406",
"name": "Serenity Lemke",
"avatar": "https://images.unsplash.com/photo-1561505457-3bcad021f8ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
}
]
const selectedPerson = people.find(person => selectedPersonId === person.id)
return (
{({ isOpen }) => (
Assign project to:
{({ isFocused }) => (
{ selectedPersonId ? (
{selectedPerson?.name}
) : "Select a person..."}
)}
{isOpen && (
{ people.map(person => (
{({ isActive, isSelected }) => (
{person.name}
{ isSelected && (
)}
)}
))}
)}
)}
)
}
export default null
```