tessl/npm-react-select

A Select control built with and for ReactJS that provides comprehensive dropdown functionality with support for single/multi-select, async data loading, search filtering, and extensive customization.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React-Select

Name: tessl/npm-react-select
Author: tessl

React-Select is a comprehensive and flexible select component library for React applications that provides a powerful, customizable dropdown interface with support for single and multi-select functionality, async data loading, search filtering, and custom option rendering. Built with TypeScript and Emotion for styling, it offers extensive customization through component injection APIs, controllable state props, and a modular architecture.

Package Information

Package Name: react-select
Package Type: npm
Language: TypeScript
Installation: npm install react-select

Core Imports

import Select from "react-select";
import AsyncSelect from "react-select/async";
import CreatableSelect from "react-select/creatable";
import AsyncCreatableSelect from "react-select/async-creatable";
import makeAnimated from "react-select/animated";
import { components, createFilter, mergeStyles, defaultTheme } from "react-select";

For CommonJS:

const Select = require("react-select").default;
const AsyncSelect = require("react-select/async").default;
const CreatableSelect = require("react-select/creatable").default;
const AsyncCreatableSelect = require("react-select/async-creatable").default;
const makeAnimated = require("react-select/animated").default;
const { components, createFilter, mergeStyles, defaultTheme } = require("react-select");

Basic Usage

import Select from "react-select";

interface Option {
  value: string;
  label: string;
}

const options: Option[] = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState<Option | null>(null);

  return (
    <Select
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
      placeholder="Select a flavor..."
      isSearchable
    />
  );
}

Architecture

React-Select is built around several key architectural components:

Core Select Components: Main select variants (Select, AsyncSelect, CreatableSelect, AsyncCreatableSelect) providing different interaction patterns
Component System: 25+ customizable sub-components that can be replaced or modified to change behavior and appearance
State Management: Built-in state management with hooks (useStateManager) or controllable props for external state
Type System: Full TypeScript support with generic types for Option and Group data structures
Styling System: Emotion-based styling with theme support, custom styles, and CSS class customization
Accessibility: ARIA compliance with customizable live region messages and keyboard navigation

Capabilities

Core Select Components

Main select component variants providing different interaction patterns and capabilities.

function Select<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  props: Props<Option, IsMulti, Group>
): JSX.Element;

function AsyncSelect<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  props: Props<Option, IsMulti, Group> & AsyncProps<Option>
): JSX.Element;

function CreatableSelect<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  props: Props<Option, IsMulti, Group> & CreatableProps<Option>
): JSX.Element;

function AsyncCreatableSelect<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  props: Props<Option, IsMulti, Group> & AsyncProps<Option> & CreatableProps<Option>
): JSX.Element;

Core Components

Async Data Loading

Async data loading capabilities for dynamic option fetching with caching and loading state management.

interface AsyncProps<Option> {
  defaultOptions?: OptionsOrGroups<Option, Group> | boolean;
  cacheOptions?: any;
  loadOptions?: (inputValue: string, callback: Function) => Promise<OptionsOrGroups<Option, Group>>;
}

Async Data Loading

Component Customization

Comprehensive component customization system allowing replacement or modification of any UI element.

interface SelectComponentsConfig<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
  ClearIndicator?: ComponentType<ClearIndicatorProps<Option, IsMulti, Group>>;
  Control?: ComponentType<ControlProps<Option, IsMulti, Group>>;
  DropdownIndicator?: ComponentType<DropdownIndicatorProps<Option, IsMulti, Group>>;
  DownChevron?: ComponentType<any>;
  CrossIcon?: ComponentType<any>;
  Group?: ComponentType<GroupProps<Option, IsMulti, Group>>;
  GroupHeading?: ComponentType<GroupHeadingProps<Option, IsMulti, Group>>;
  IndicatorsContainer?: ComponentType<IndicatorsContainerProps<Option, IsMulti, Group>>;
  IndicatorSeparator?: ComponentType<IndicatorSeparatorProps<Option, IsMulti, Group>>;
  Input?: ComponentType<InputProps<Option, IsMulti, Group>>;
  LoadingIndicator?: ComponentType<LoadingIndicatorProps<Option, IsMulti, Group>>;
  Menu?: ComponentType<MenuProps<Option, IsMulti, Group>>;
  MenuList?: ComponentType<MenuListProps<Option, IsMulti, Group>>;
  MenuPortal?: ComponentType<MenuPortalProps<Option, IsMulti, Group>>;
  LoadingMessage?: ComponentType<NoticeProps<Option, IsMulti, Group>>;
  NoOptionsMessage?: ComponentType<NoticeProps<Option, IsMulti, Group>>;
  MultiValue?: ComponentType<MultiValueProps<Option, IsMulti, Group>>;
  MultiValueContainer?: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
  MultiValueLabel?: ComponentType<MultiValueGenericProps<Option, IsMulti, Group>>;
  MultiValueRemove?: ComponentType<MultiValueRemoveProps<Option, IsMulti, Group>>;
  Option?: ComponentType<OptionProps<Option, IsMulti, Group>>;
  Placeholder?: ComponentType<PlaceholderProps<Option, IsMulti, Group>>;
  SelectContainer?: ComponentType<ContainerProps<Option, IsMulti, Group>>;
  SingleValue?: ComponentType<SingleValueProps<Option, IsMulti, Group>>;
  ValueContainer?: ComponentType<ValueContainerProps<Option, IsMulti, Group>>;
}

Customization

Core Types and Interfaces

Complete type system supporting generic Option and Group types with full TypeScript integration.

interface GroupBase<Option> {
  readonly options: readonly Option[];
  readonly label?: string;
}

type Options<Option> = readonly Option[];
type SingleValue<Option> = Option | null;
type MultiValue<Option> = readonly Option[];
type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;

interface ActionMeta<Option> {
  action: 'select-option' | 'deselect-option' | 'remove-value' | 'pop-value' | 'set-value' | 'clear' | 'create-option';
  name?: string;
  option?: Option;
  removedValue?: Option;
  removedValues?: Option[];
}

Types and Interfaces

Animated Components

Animated components system providing smooth transitions for multi-select values and other UI elements.

function makeAnimated(
  externalComponents?: Partial<SelectComponentsGeneric>
): Partial<SelectComponentsGeneric>;

interface AnimatedComponents {
  Input: ComponentType<InputProps<any, any, any>>;
  MultiValue: ComponentType<MultiValueProps<any, any, any>>;
  Placeholder: ComponentType<PlaceholderProps<any, any, any>>;
  SingleValue: ComponentType<SingleValueProps<any, any, any>>;
  ValueContainer: ComponentType<ValueContainerProps<any, any, any>>;
}

Animated Components

Hooks and State Management

Core hooks for state management and advanced component integration.

function useStateManager<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  props: StateManagerProps<Option, IsMulti, Group>
): StateManagerReturn<Option, IsMulti, Group>;

function useAsync<Option>(
  props: AsyncProps<Option>
): AsyncState<Option>;

function useCreatable<Option>(
  props: CreatableProps<Option>
): CreatableState<Option>;

Hooks and State Management

Utilities

createFilter

Factory function for creating custom filter functions with configurable matching behavior.

function createFilter<Option>(config?: FilterConfig<Option>): FilterFunction<Option>;

interface FilterConfig<Option> {
  ignoreCase?: boolean;
  ignoreAccents?: boolean;
  stringify?: (option: FilterOptionOption<Option>) => string;
  trim?: boolean;
  matchFrom?: 'any' | 'start';
}

mergeStyles

Utility for merging style configurations with deep object merging.

function mergeStyles<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
  source: StylesConfig<Option, IsMulti, Group>,
  target: StylesConfig<Option, IsMulti, Group>
): StylesConfig<Option, IsMulti, Group>;

NonceProvider

CSP nonce provider component for secure style injection.

function NonceProvider({ nonce, children }: { nonce: string; children: ReactNode }): JSX.Element;

components

Object containing all individual Select sub-components for granular customization.

const components: {
  ClearIndicator: ComponentType<ClearIndicatorProps<any, any, any>>;
  Control: ComponentType<ControlProps<any, any, any>>;
  DropdownIndicator: ComponentType<DropdownIndicatorProps<any, any, any>>;
  Input: ComponentType<InputProps<any, any, any>>;
  Menu: ComponentType<MenuProps<any, any, any>>;
  Option: ComponentType<OptionProps<any, any, any>>;
  // ... 25+ total components
};

defaultTheme

Default theme configuration object with colors and spacing definitions.

const defaultTheme: {
  colors: Colors;
  spacing: ThemeSpacing;
};

interface Colors {
  primary: string;
  primary75: string;
  primary50: string;
  primary25: string;
  danger: string;
  dangerLight: string;
  neutral0: string;
  // ... additional color definitions
}

interface ThemeSpacing {
  baseUnit: number;
  controlHeight: number;
  menuGutter: number;
}

Workspace: tessl
Visibility: Public
Created: 7 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-select@5.10.x
Publish Source: CLI
Badge