react-turbo-select
TypeScript icon, indicating that this package has built-in type declarations

1.1.8 • Public • Published

🚀 ✴️ React Turbo Select ✴️ 🚀

NPM Downloads npm NPM License npm collaborators

🚀 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

Package Sidebar

Install

npm i react-turbo-select

Weekly Downloads

6

Version

1.1.8

License

MIT

Unpacked Size

364 kB

Total Files

36

Last publish

Collaborators

  • mohamedwaelbishr