react-simple-stylable-select v0.0.5

React simple styleable and accessible select

This is a simple animatable select implementation which is customisable via several components that can be passed in. It uses the ARIA combobox pattern for accessibility and is modelled after the sonder-ui select (see the linked page for more notes on accessibility).

Demo

Stackblitz demo

Installation and usage

npm install react-simple-stylable-select

Usage:

import { Select } from "react-simple-stylable-select";

const countries = ["France", "South Africa", "Japan", "Antigua and Barbuda", "Argentina", "United Kingdom"];

<Select
  name="select"
  options={countries}
  defaultValue="United Kingdom"
  components={{
    SelectValue: ({ selectedIndex }: { selectedIndex: number }) => (
      <div
        style={{
          minWidth: '200px',
          padding: '0.5rem 2rem 0.5rem 0.5rem',
          border: '2px solid #eee',
          background: '#f9f9f9',
          color: '#111',
        }}
      >
        {countries[selectedIndex]}
      </div>
    ),
    OptionListWrapper: ({ children }: { children: React.ReactNode }) => (
      <div
        style={{
          backgroundColor: '#eee',
          color: '#111',
        }}
      >
        {children}
      </div>
    ),
    OptionValue: ({
      option,
      isSelected,
      isFocused,
    }: {
      option: string;
      isSelected: boolean;
      isFocused: boolean;
    }) => (
      <div
        style={{
          padding: '0.5rem',
          outlineOffset: '-2px',
          outline: isFocused ? '2px solid #ccc' : 'none',
          background: isSelected ? '#ccc' : 'none',
        }}
      >
        {isSelected ? '✓ ' : ''}
        {option}
      </div>
    ),
  }}
/>

Props

Anatomy

Display components