react-turbo-select

🚀 ✴️ React Turbo Select ✴️ 🚀

🚀 Turbo Select, a cutting-edge and versatile React component, delivers an unparalleled dropdown select menu for your applications. Seamlessly cater to your needs, whether it's a seamless single selection or a dynamic, multi-faceted choice with tags. 💡 Empowered with a plethora of customization options, Turbo Select adapts effortlessly to a diverse array of use cases. Tailor it to perfection and unlock endless possibilities for your projects. 💻💪

🔍 Preview

LIGHT MODE	DARK MODE

🛠️ Installation

To install Turbo Select in your React project, you can use npm or yarn:

npm install react-turbo-select

or

yarn add react-turbo-select

⚙️ Props and APIs

Turbo Select accepts the following props:

⚙️ Props	💡 Description
isSearchable	Enable searching/filtering options.
isLoading	Show loading indicator when options are being loaded asynchronously.
isClearable	Allow clearing the selected option(s).
isMultiple	Allow multiple option selection.
showTagsControls	Show tags for selected options when in multiple selection mode.
isDisabled	Disable the select component.
closeOnSelect	Close the dropdown menu after selecting an option.
menuOpen	Initial state of the dropdown menu (open or closed).
noOptionsMessage	Custom message to display when no options are available.
loadingMessage	Custom message to display when options are loading.
autoFocus	Automatically focus on the input when the component mounts.
onMenuOpen	Callback function when the dropdown menu opens.
onMenuClose	Callback function when the dropdown menu closes.
onReachMaxScroll	Callback function when the menu reaches its maximum scroll position.
openMenuOnClick	Open the menu when clicking on the component.
escapeCloseMenu	Allow closing the menu when pressing the escape key.
isRtl	Set the component to support right-to-left languages.
dropDownIcon	Custom icon to display as the dropdown indicator.
defaultMenuIsScrollable	Enable scrolling in the dropdown menu by default.
options	An array of Option objects (interface defined in the package).
	* if this provided it will override optionsGroups prop
optionsGroups	An array of OptionGroup objects (interface defined in the package).
	* this prop will be neglected in case of options prop existed
getContainerRef	Callback function to get the reference of the container element.
getInputRef	Callback function to get the reference of the input element.
getMenuRef	Callback function to get the reference of the dropdown menu element.
containerStyles	Custom styles for the main container element.
inputStyles	Custom styles for the input element.
menuStyles	Custom styles for the dropdown menu.
optionStyles	Custom styles for the options in the dropdown menu.
defaultValue	The default selected option(s).
onChange	Callback function when the selected option(s) change.
placeholder	Placeholder text for the input.
width	Width of the select component (default: 300).
height	Height of the select component (default: 40).
menuHeight	Maximum height of the dropdown menu (default: 250).
iconFlicker	Enable icon flickering animation (default: false).
borderRadius	Border radius for the select component (default: "tiny").
gapBetweenControls	Gap between the controls (tag and dropdown icon) (default: 10).
tagStyle	Custom styles for the tags in multiple selection mode.
mode	Color mode of the select component ("light" or "dark") (default: "light").

🎮 Demo

check out our live demo ↗ to see some more advanced examples of how to use my package in the real world.

🎉 Getting Started

To get started with Turbo Select, simply import the component into your project:

import { TurboSelect } from 'react-turbo-select'

📖 Usage

Here's a quick example of how you can use Turbo Select in your React application:

📌 using it with options prop

import React from 'react'
import { TurboSelect } from 'react-turbo-select'

const options = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
  // Add more options as needed
]

const MyComponent = () => {
  // Your component logic here
  return (
    <div>
      <h1>My Awesome App</h1>
      <TurboSelect options={options} />
      {/* Add more components and logic */}
    </div>
  )
}

export default MyComponent

📌 using it with optionsGroups prop

import React from 'react'
import { TurboSelect } from 'react-turbo-select'

const optionsGroups = {[
          {
            groupName: 'First Group',
            groupValues: [
              { label: 'React', value: 'react' },
              { label: 'Vite', value: 'vite' },
              { label: 'Ahmed', value: 'ahmed' },
              { label: 'Mohamed', value: 'mohamed' },
            ],
          },
          {
            groupName: 'Second Group',
            groupValues: [
              { label: 'Khaled', value: 'khaled' },
              { label: 'Ali', value: 'ali' },
              { label: 'Maher', value: 'maher' },
              { label: 'Moheb', value: 'moheb' },
            ],
          },
          {
            groupName: 'Third Group',
            groupValues: [
              { label: 'Mahmoud', value: 'mahmoud' },
              { label: 'Nour', value: 'nour' },
              { label: 'Salah', value: 'salah' },
              { label: 'Ameer', value: 'ameer' },
            ],
          },
        ]}

const MyComponent = () => {
  // Your component logic here
  return (
    <div>
      <h1>My Awesome App</h1>
      <TurboSelect optionsGroups={optionsGroups} />
      {/* Add more components and logic */}
    </div>
  )
}

export default MyComponent