React-dropdown-package NPM

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.