@ibrahimstudio/select v1.0.5

@ibrahimstudio/select is a highly customizable and reusable dropdown menu for React applications. This component is designed for seamless integration, offering advanced features such as searchable options, dynamic customization, and an intuitive user interface.

Its flexibility and ease of use make it an excellent choice for developers looking to streamline their workflow while ensuring a consistent and polished user experience.

Code by Ibrahim Space Studio, Design by Ibrahim Design Studio.

1. Features

• Fully Customizable Design: Supports custom colors, border radius, and more to match your application’s theme.
• Searchable Dropdown: Built-in search functionality for better usability with large datasets.
• Dynamic Option Handling: Accepts dynamic data and provides callbacks for seamless integration with APIs.
• Accessibility: Designed with accessibility in mind, ensuring usability for all users.
• Event Handling: Provides hooks for actions like selection and search input changes.

2. Installation

You can install this package via npm:

npm i @ibrahimstudio/select

or via yarn:

yarn add @ibrahimstudio/select

3. Usage

Import the Select component in your React application:

import { Select } from "@ibrahimstudio/select";

Defining the options Prop

The options prop is an array of objects, where each object contains two required fields:

• value (string or number): The unique value of the option.
• label (string): The text displayed in the dropdown menu.

const options = [
  { value: 1, label: "Option 1" },
  { value: 2, label: "Option 2" },
  { value: 3, label: "Option 3" },
];

Handling the onChange Callback

The onChange prop is a function triggered whenever a user selects an option. The callback receives the value of the selected option.

const handleSelect = (value) => {
  console.log("Selected value:", value);
};

If the user selects "Option 1", the console will log:

Selected value: 1

Adding Search Functionality with searchable

To enable the search functionality, set the searchable prop to true. By default, the search box will filter the options array based on the entered search term without requiring any additional setup.

If you want custom behavior, such as fetching options dynamically from an API or handling search input differently, you can define the onSearch prop.

Default Search Behavior (Without onSearch)

<Select name="fruits" searchable options={options} onChange={handleSelect} />

• When searchable is set to true and no onSearch is defined, the component automatically filters the options based on the label field.
• When the user types "ap" in the search box, only the "Apple" option is displayed.
• No additional coding is required for this filtering.

Custom Search Behavior with onSearch

When you define an onSearch prop, you can customize how search input is handled. For example, you can fetch data from an API or apply additional filtering logic.

Setup the handler:

const [options, setOptions] = useState([]);

const handleSearchChange = (searchTerm) => {
  console.log("Search term:", searchTerm);

  // Simulate API request
  fetch(`/api/fruits?query=${searchTerm}`)
    .then((res) => res.json())
    .then((data) => setOptions(data))
    .catch((error) => console.error("Error fetching fruits:", error));
};

Usage on JSX:

<Select name="fruits" searchable onSearch={handleSearchChange} options={options} onChange={handleSelect} />

• When the user types into the search box, the handleSearchChange function is triggered with the current search term.
• The app fetches matching options from an API endpoint.
• The dropdown menu displays the dynamically fetched options.

4. API

Select Props

Select Event(s)

5. Contributing

Contributions are welcome! If you have any improvements, bug fixes, or features, feel free to open an issue or create a pull request on GitHub.

6. License

This project is licensed under the MIT License - see the LICENSE file for details.