React-select-custom-component NPM

react-select-custom-component

react-select-custom-component is a flexible and customizable React library for building dropdowns and select inputs with custom components, seamless styling, and full accessibility support.

Features

🎨 Customizable Components: Fully replaceable components for rendering options and the dropdown.
⚡ Fast and Lightweight: Optimized for performance and small bundle size.
📱 Responsive: Works perfectly on mobile and desktop.
♿ Accessible: Fully keyboard-navigable and ARIA-compliant.
🚀 TypeScript Support: Built-in TypeScript definitions for better development experience.

Example

Click here to view. here Click here to view. codesandbox

Installation

Install the package using npm or yarn:

 npm install react-select-custom-component
 yarn install react-select-custom-component

Usage

Here is an example of how to use react-select-custom-component in your project:

import { MultipleSelect } from 'react-select-custom-component';

import "react-select-custom-component/dist/tailwind.css"; // import CSS file (important)

// data
const fruits = [
  { id: 1, name: "Apple" },
  { id: 2, name: "Lemon" },
  { id: 3, name: "Watermelon" },
  { id: 4, name: "Melon" },
  { id: 5, name: "Peach" },
  { id: 6, name: "Pomegranate" },
  { id: 7, name: "Banana" },
  { id: 8, name: "Banana" },
  { id: 9, name: "Orange" },
  { id: 10, name: "Pineapple" },
];

function Example() {

  // get value
  const changeSelectedHandler = value => {
    console.log(value);
  }

  return (
      <MultipleSelect
        data={fruits}
        defaultValue={[
            { id: 1, name: "Apple" },
            { id: 2, name: "Lemon" },
        ]}
        isMulti={true}
        title={{
          name: 'Fruits',
          size: '11px',
          color: "#475467"
        }}
        placeholder={{
          name: 'Fruits',
          size: '11px',
          color: "gray"
        }}
        listItemStyle={{
          color: "black",
          size: "11px",
          maxHeight: 150,
          checkboxColor: "#0000ff",
          zIndex: 20
        }}
        isSearch={true}
        lang="en"
        mandatory={false}
        disabled={false}
        style={{ maxWidth: "200px", height: "30px", borderRadius: "3px", color: "#475467", borderColor: "#ccc", outlineColor: "#3b82f6", borderWidth: "2px" }}
        className="react-multiple-select"
        changeSelectedHandler={changeSelectedHandler}
      />
  )
}

export default Example;

Props

Prop	Description	Type	Default
data	In this case, complete information is provided in the form of an array, i.e.	Array, example { id: 1, name: "Apple" }, {}, {}	[]
defaultValue	You need to provide an array as the default value.	array	if isMulti === true { id: 1, name: "Apple" }, {}, {}, else { id: 1, name: "Apple" }
isMulti	If true, there are 2 or more choices, otherwise there is only 1 choice	boolean	true
title	For the title above	object	{ name: "", size: "11px", color: "gray" }
placeholder	For placeholder	object	{ name: "placeholder", size: "11px", color: "gray" }
listItemStyle	Styling lists	object	{ color: "black", size: "11px", maxHeight: 150, checkboxColor: "#0000ff" }
isSearch	If True, the ability to search in lists will appear.	boolean	true
lang	Change the language of the placeholder in the search field.	string	"en"
mandatory	This is to indicate that select is mandatory.	boolean	false
style	To give optional styles.	object	{ maxWidth: "200px", height: "30px", borderRadius: "5px", color: "#0073FB" }
className	You can change the position of the text yourself using CSS.	string	react-multiple-select
changeSelectedHandler	You can get the result using this function	function	optional function

Why Use `react-select-custom-component`?

Ease of Use: Simple API and easy integration.
Full Control: Customize every part of the dropdown to suit your application.
Community Driven: Built with best practices for React and modern web development.
Rich Documentation: Comprehensive examples and guides for every use case.

Keywords

React Select, Custom Dropdown, React Dropdown, Select Component, Customizable Select, React Library, Accessible Dropdown, multiple-select, select, react-select, react-select-multiple, multi-select-react, tailwindcss-select, select-components, react-select-component, select-multiple, react-select-custom-component, react-custom-component, react-select-custom, custom-select, dropdown, dropdown-select-component,

Development

To contribute or make changes, clone the repository and install dependencies:

git clone https://github.com/hikmatjan1/react-select-custom-component.git
cd react-select-custom-component
npm install

Run the development server:

npm run dev

Updates

A full update has been implemented starting with version 1.0.28. I apologize to everyone for the inconvenience caused by the missing CSS file.
Starting from version 1.1.36, the option to select only 1 has also been added. Returns an object as the result, otherwise returns an array.