React Dropdown Package

A simple and customizable dropdown component for React applications.

Tech Stack

Component: React, TypeScript, TailwindCSS

Prerequisites

• Node.js >= 14.0.0
• npm >= 6.0.0
• TypeScript >= 2.7
• React >= 18.0.0

Installation

Install react-dropdown-package and required dependencies (typescript@>=2.7 fontawesome)

  npm install react-dropdown-package
  npm install typescript @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

Usage

import React, { useState } from "react";
import Dropdown from "react-dropdown-package";
import "./your-custom-styles.css";

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

const App = () => {
  const [selected, setSelected] = useState(options[0].value);

  const handleSelect = (selectedValue) => {
    setSelected(selectedValue);
    console.log(selectedValue);
  };

  return (
    <Dropdown
      options={options}
      selected={selected}
      onSelectedChange={handleSelect}
      placeholder="Please select an option"
      isDisabled={false}
      customClasses={{
        container: "my-dropdown",
        button: "my-toggle",
        list: "my-menu",
        listItem: "my-item",
        chevron: "my-chevron",
      }}
      buttonWidth={200} 
      listWidth={200}   
      buttonHeight={40} 
      listMaxHeight={200}  
      customIcons={{
        chevron: <MyCustomChevronIcon />
      }}
      onOpen={() => console.log('Dropdown opened')}
      onClose={() => console.log('Dropdown closed')}
    />
  );
};

export default App;

Props

| Prop Name | Type | Description | | ------------------ | -------- | ------------------------------------------------------- | | options | array | The options for the dropdown. | | selected | string | The currently selected value. | | onSelectedChange | function | Function called when an option is selected. | | placeholder | string | Default text displayed when nothing is selected. | | isDisabled | boolean | Disables the dropdown if true. | | customClasses | object | Custom CSS classes for the component. | | customIcons | object | Custom icons for the component. | | onOpen | function | Function called when the dropdown is opened. | | onClose | function | Function called when the dropdown is closed. | | buttonWidth | number | Width of the dropdown button in px (optional). | | buttonHeight | number | Height of the dropdown button in px(optional). | | listWidth | number | Width of the dropdown list in px (optional). | | listMaxHeight | number | Max Height of the dropdown list in px (optional). |

customClasses Object Structure

| Key | Type | Description | | ----------- | ------ | -------------------------------------------------------- | | container | string | CSS class for the dropdown container. | | button | string | CSS class for the toggle button. | | list | string | CSS class for the dropdown menu. | | listItem | string | CSS class for the dropdown menu items. | | chevron | string | CSS class for the chevron icon. |

customIcons Object Structure

| Key | Type | Description | | --------- | --------- | -------------------------------------------------------- | | chevron | ReactNode | Custom icon for the chevron. |

Licence

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