react-tailwind-dropdown v1.0.0

React Tailwind Components

React Tailwind Components is a custom set of React components designed to seamlessly integrate with Tailwind CSS in your web applications. These components offer flexibility and extensive customization options to enhance your web development experience. Below, you'll find instructions on how to install and use these components in your projects.

Installation To get started with React Tailwind Components, you can easily install the package using npm or yarn:

npm install react-tailwind-components

or

yarn add react-tailwind-components Usage Once the package is installed, you can import and utilize the components in your React applications. Below is an example demonstrating how to use the Dropdown component:

import Dropdown from 'react-tailwind-components';

// ...

<Dropdown className='relative'>
  <Dropdown.Trigger
    type="a"
  >
    Dropdown &#x25be;
  </Dropdown.Trigger>

  <Dropdown.Content 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 items here -->
  </Dropdown.Content>
</Dropdown>

// Additional examples and components can be integrated here You have the flexibility to customize the styles and behavior of these components by adjusting class names and properties.

Available Props Dropdown Component The Dropdown component serves as the container for the dropdown elements and manages its state. It is responsible for detecting clicks outside the dropdown to close it.

open and setOpen: State variables that track whether the dropdown is open or closed. toggleOpen: A function to toggle the dropdown's open/close state. dropdownRef: A reference to the dropdown element used for detecting clicks outside the dropdown. Trigger Component The Trigger component is used to define the clickable element that triggers the dropdown to open or close. It can be either a button or a link.

type: Specifies the type of trigger element, such as "a" for an anchor link or a button. className: CSS classes for styling the trigger element. id: A unique identifier for the trigger element. href: If it's a link, this specifies the destination route or URL. When clicked, it calls the toggleOpen function from the DropdownContext to open or close the dropdown. Content Component The Content component represents the actual content that appears in the dropdown when it is open. It manages the content's appearance and transition animations.

as: Specifies the HTML element type to be used for the content (default is a div). align: Controls the alignment of the content (left or right). className: CSS classes for styling the content. width: Sets the width of the content. contentClasses: CSS classes specific to the content. children: The content that appears inside the dropdown.

The Content component uses the Transition component from @headlessui/react to apply transition animations when the dropdown opens and closes. It's nested within the DropdownContext, and clicking on the content will close the dropdown. License The React Tailwind Components package is open-source and distributed under the MIT License. You are encouraged to use, modify, and integrate it into your projects.