React Tailwind Dropdown Component

react-tw-dropdown is a flexible and accessible dropdown menu component for React, designed with Tailwind CSS in mind. This component allows you to easily create customizable dropdown menus with animated content, various menu items, and automatic closure when a click occurs outside of the dropdown.

Features

• Customizable: Easily style the dropdown menu and its elements using Tailwind CSS classes.
• Accessibly Animated: Utilizes the react-tw-dropdown library for smooth, accessible animations.
• Handles Click Outside: Automatically closes the dropdown when a click occurs outside of it.

Installation

To use react-tw-dropdown in your React project, follow these steps:

1. Install the react-tw-dropdown library, if not already installed:

   npm install react-tw-dropdown
   # or
   yarn add react-tw-dropdown

Install react-tw-dropdown:

npm install react-tw-dropdown

or

yarn add react-tw-dropdown Import the component in your project:

import { Dropdown } from 'react-tw-dropdown'; Usage The react-tw-dropdown component provides the following subcomponents:

Trigger: The element that triggers the dropdown to open. Menu: The dropdown content that is shown when the trigger is clicked. Link: A link component that can be used within the dropdown menu. Here's an example of how to use these components:

import { Dropdown } from 'react-tw-dropdown';

For Link

function MyDropdown() {
  return (
    <Dropdown className='relative'>
      {/* Trigger element */}
      <Dropdown.Trigger type="a">
        CustomDropdown &#x25be;
      </Dropdown.Trigger>

      {/* Dropdown menu */}
      <Dropdown.Menu as="ul">
        <li>
          <a className="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover-bg-slate-100 hover-text-slate-500 focus-bg-slate-100 focus-text-slate-500 dark:text-zink-50 dark-bg-zink-400 dark:hover-bg-zink-300" href="#!">Action</a>
        </li>
        <li>
          <a className="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover-bg-slate-100 hover-text-slate-500 focus-bg-slate-100 focus-text-slate-500 dark:text-zink-50 dark-bg-zink-400 dark:hover-bg-zink-300" href="#!">Another action</a>
        </li>
        {/* Add more menu items here */}
      </Dropdown.Menu>
    </Dropdown>
  );
}

import { Dropdown } from 'react-tw-dropdown';

For Button

function MyDropdown() {
  return (
    <Dropdown className='relative'>
      {/* Trigger element */}
      <Dropdown.Trigger type="button">
        CustomDropdown &#x25be;
      </Dropdown.Trigger>

      {/* Dropdown menu */}
      <Dropdown.Menu as="ul">
        <li>
          <a className="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover-bg-slate-100 hover-text-slate-500 focus-bg-slate-100 focus-text-slate-500 dark:text-zink-50 dark-bg-zink-400 dark:hover-bg-zink-300" href="#!">Action</a>
        </li>
        <li>
          <a className="block px-4 py-1.5 text-base font-medium transition-all duration-200 ease-linear bg-white text-slate-600 dropdown-item hover-bg-slate-100 hover-text-slate-500 focus-bg-slate-100 focus-text-slate-500 dark:text-zink-50 dark-bg-zink-400 dark:hover-bg-zink-300" href="#!">Another action</a>
        </li>
        {/* Add more menu items here */}
      </Dropdown.Menu>
    </Dropdown>
  );
}

Customization You can customize the appearance of the dropdown by passing Tailwind CSS classes as props to the components. For example:

For Dropdown

For Dropdown.Trigger

For Dropdown.Menu

<Dropdown.Trigger className="my-custom-trigger">Click Me</Dropdown.Trigger>
<Dropdown.Menu className="my-custom-menu">...</Dropdown.Menu>
<Dropdown.Link className="my-custom-link">...</Dropdown.Link>

Handling Click Outside The dropdown automatically closes when a click occurs outside of it. This behavior is implemented using the useEffect hook in the Dropdown component.

License react-tw-dropdown is open-source and available under the MIT License. You are free to use and modify it in your projects.

You can use this README as a documentation file for your "react-tw-dropdown" plugin. Make sure to include the correct installation instructions, usage examples, and customization guidance based on your plugin's functionality and styling with Tailwind CSS.