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