React Simple Select

This is a fairly small-ish implementation of a select-like component in React. As the name suggests, the goal is to make a relatively simple version, so if you're looking for something with all of the bells and whistles, you may have better luck with react-select.

I would definitely advise against using this in any production projects. I have pretty minimal time to work on it, and it's mostly just a fun side project for me (i.e. I cannot guarantee any level of support).

Docs & Playgrounds

You can see some working examples and play around with it interactively at this interactive CodeSandbox project.

Alternately, you can view the hosted Styleguidist project. This is more useful for dev purposes, and I would lean on the CodeSandbox link more for learning purposes, but this is here if it helps!

Why?

Why make this when other options like react-select already cover all of these options and more?

You're right, react-select is a crazy good component, and I am certainly not trying to compete with it (hence why I suggested you might be better off using it for production projects). But there are a few reasons I wanted to build this:

• It's a fun project, so why not?
• There are a few "I would do this different" aspects of other libs that I wanted to try
  • Build with fewer (if any) external dependencies (aside from React, obviously)
  • Allow for more friendly and flexible custom styling of every aspect of the component
  • Build it to be testable--some of the other libraries are notoriously difficult to test properly

Getting Started

• Install:
  • yarn add @gargrave/react-simple-select
• Pull in the default CSS to initialize the styles somewhere near the root of your project:
  • import '@gargrave/react-simple-select/dist/react-simple-select.css'
  • Technically, you don't have to import these styles, but this does apply the default styling to the component, which I think you will in most cases. (You can pass in custom styles to override the defaults if you wish.)
  • Note that this is a plain old un-minified CSS file. The assumption is that your build process will handle "compiling" it however is best for your app.
• Use the Select component in your project! A very rough example might look something like this. (Until I have better docs, you can take a look at my demo project)

Todo

These are few items on my current road map, although I don't have any specific ETA:

• [ ] Customizable styling (coming soon)
• [ ] Accessibility additions (e.g. better ARIA handling for current lists)
• [ ] Custom option rendering (e.g. render options as components instead of just strings)
• [ ] Groupable options
• [ ] Editable options (i.e. type to add a new option)
• [ ] Multi-select
• [x] Async searching/loading
• [x] Add ability to specify data-testid attributes to all "testable" parts of the component