react-select

React Select

A simple and customizable React dropdown select component supporting single, multi, and grouped options.

🌐 Demo

Checkout Demo of react-select

Version 0.1.1 Changelog:

• Fixed not opening bug when disabled
• Added name property so that if the ReactSelect is inside a form, it can be accessed.
  • The input has value as the value of the selected option
  • Also has a dataset data raw, containing JSON.stringify-ed of the full data of the selected option
• Used Buttons instead of Div in 2 places
• Avoided the controlled to uncontrolled input problem by using state. Not new state, already used state

Features

• Single & multi select
• Grouped options
• Clearable & searchable
• Disabled state support
• TypeScript ready
• Using name in form

Installation

# using npm
npm install @theprojectsx/react-select

# using yarn
yarn add @theprojectsx/react-select

Usage

import React, { useState } from "react";
import ReactSelect, { Option, GroupedOption } from "@theprojectsx/react-select";

const options: Option[] = [
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
];

export default function App() {
    const [selected, setSelected] = useState<Option | Option[] | null>(null);

    return (
        <ReactSelect
            options={options}
            placeholder="Select an option"
            isClearable
            onChange={setSelected}
        />
    );
}

Props

Prop	Type	Default	Description
options	Option[] \| GroupedOption[]	-	Items to display in the dropdown
defaultValue?	Option \| Option[] \| null	null	Initial selected value
placeholder?	string	"Select..."	Placeholder text
name?	string	select	Input name attribute to use in form
isClearable?	boolean	false	Whether selection can be cleared
isSearchable?	boolean	true	Enable search in the dropdown
isDisabled?	boolean	false	Disable the select
isGrouped?	boolean	false	Enable grouped options
isMulti?	boolean	false	Enable multi-select
parentStyle?	React.CSSProperties	-	Inline style for parent container
menuStyle?	React.CSSProperties	-	Inline style for dropdown menu
onChange?	(item: Option \| Option[] \| null) => void	-	Callback triggered on value change
onMenuStatusChange?	(status: boolean) => void	-	Callback when menu opens/closes
onSearch?	(value: string) => void	-	Callback for search input

License

MIT License @TheProjectsX

This site is open source. Improve this page.