Custom Select Options

CustomSelectOptions is a customizable select dropdown component built with React. It supports both single and multi-select options, displays selected values, and allows users to clear selections. This component is designed to be flexible and easy to integrate into your React applications.

Installation

To install the CustomSelectOptions component, you can use npm or yarn. Run the following command in your project directory:

npm install custom-select-options

or

yarn add custom-select-options

Usage

To use the CustomSelectOptions component in your React application, import it as follows:

import CustomSelectOptions from 'custom-select-options';

Props

The CustomSelectOptions component accepts the following props:

• style: Defines the style of the select dropdown. Options are "withArrow", "normal", or "outline".
• color: A string to set the text color.
• startIcon: A React node to display at the start of the select box.
• endIcon: A React node to display at the end of the select box.
• selectIcon: A React node to display as the select icon.
• customColor: A string to set a custom color.
• customClass: A string to add custom CSS classes.
• isMulti: A boolean to enable multi-select mode.
• placeholder: A string to display when no option is selected.
• label: A string to display as the label for the select dropdown.
• isRequired: A boolean to indicate if the selection is required.
• isError: A boolean to indicate if there is an error.
• options: An array of options to display in the dropdown. Each option should have a label and a value.
• value: The currently selected option(s).
• onChange: A callback function that is called when the selected value changes.
• showClear: A boolean to show or hide the clear selection button.

Example

Here is a simple example of how to use the CustomSelectOptions component:

import React, { useState } from 'react';
import CustomSelectOptions from 'custom-select-options';

const App = () => {
  const [selectedValue, setSelectedValue] = useState(null);
  const options = [
    { label: 'Option 1', value: 1 },
    { label: 'Option 2', value: 2 },
    { label: 'Option 3', value: 3 },
  ];

  return (
    <CustomSelectOptions
      options={options}
      value={selectedValue}
      onChange={setSelectedValue}
      placeholder="Select an option"
      label="Choose an option"
      isRequired
    />
  );
};

export default App;

License

This project is licensed under the MIT License. See the LICENSE file for more details.