mitchbne/react-listbox

A React implementation to the Listbox found at https://github.com/tailwindlabs/tailwindui-vue

Hi there, I'm Mitch. 👋

I'm a Software Engineer currently working for Buildkite🪁. I would take whatever you see in these public GitHub repos with a grain of salt...they are mostly side projects and built with questionable practices and commit hygiene! 😅

Let's connect: Twitter • Linkedin • Website

react-listbox's Issues

Release new npm version

Hi @mitchbne would you be able to release a new version. Thanks!

Add support for the ListboxList component to be a React Portal

Hey @mitchbne whats your vision for this task?

Would this be a flag on the ListboxList that puts it into portal mode?

Create a multi-select solution

Hi again @mitchbne 👋

If you haven't started on this already I would love to pick up the task.

Images of UIFaces do not load in the demo

The images do not load in the demo. Use Unsplash images instead of UIFaces.

I found a few of the images url of Unsplash from https://tailwindui.com/components/application-ui/forms/select-menus if you wanna use it instead:

[
  "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",
  "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",
  "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
  "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",
  "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",
  "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",
  "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",
  "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",
  "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",
  "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",
  "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"
]

It would look like:

[
  {
    "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"
  }
]

Bdw is this the same as https://tailwindui.com/components/application-ui/forms/select-menus with Custom Avatar? I am trying to convert it to React from Alpine but it's too complex lol so I might be using this one 😂

Make deploying new versions automated when merging to master

To avoid having to have to manually release like in #19

Support for Chrome Extension

This line throws the error:

react-listbox/src/Listbox.tsx

Line 104 in 135ce10

process.nextTick(() => {

ReferenceError: process is not defined

I'm trying to use react-listbox in Chrome extension but getting this error as process is undefined.

Any workaround around this? Can we use something else other than process.nextTick to get the same output?

Update npm package with multi-select

Hi there, it seems the npm package hasn't been updated with the latest multi-select code, it would be great to see that updated.

Multiselect menu does not close on click away

This can be reproduced here: https://react-listbox.vercel.app/?path=/story/example-listbox--multiselect

Does process.nextTick() break in SSR settings? (Such as Gastby?, Nextjs?)

I'm experimenting with react-listbox for use in a Gatsby site. The following error occurs when clicking ListboxButton:

Am I right that this issue happens if server-side-rendering? Is there an alternative approach (rather than process.nextTick) that could be used?