🚀 ✴️ 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-selector
yarn add react-turbo-select⚙️ Props and APIs
Turbo Select accepts the following 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