@react-types/select

What is @react-types/select?

@react-types/select is a TypeScript type definitions package for the React Spectrum Select component. It provides type definitions for building accessible and customizable select components in React applications.

What are @react-types/select's main functionalities?

SelectProps

Defines the properties for a Select component, including label, items, and onSelectionChange handler.

import { SelectProps } from '@react-types/select';

const selectProps: SelectProps<string> = {
  label: 'Choose an option',
  items: [{ name: 'Option 1' }, { name: 'Option 2' }],
  onSelectionChange: (key) => console.log(key)
};

Item

Defines individual items within the Select component.

import { Item } from '@react-types/select';

const items = [
  <Item key="1">Option 1</Item>,
  <Item key="2">Option 2</Item>
];

Section

Defines sections within the Select component to group related items.

import { Section } from '@react-types/select';

const sections = [
  <Section title="Group 1">
    <Item key="1">Option 1</Item>
    <Item key="2">Option 2</Item>
  </Section>,
  <Section title="Group 2">
    <Item key="3">Option 3</Item>
    <Item key="4">Option 4</Item>
  </Section>
];

Other packages similar to @react-types/select

react-select

react-select is a flexible and customizable select input control for React. It provides a wide range of features including async options, custom styling, and accessibility. Compared to @react-types/select, react-select offers more out-of-the-box functionality and customization options.

downshift

downshift is a library that provides primitives to build flexible and accessible dropdowns and comboboxes. It offers a lower-level API compared to @react-types/select, giving developers more control over the behavior and rendering of the select components.

react-dropdown

react-dropdown is a simple and lightweight dropdown component for React. It is less feature-rich compared to @react-types/select but is easy to use and integrates well with most React applications.

README

@react-types/select

This package is part of react-spectrum. See the repo for more details.