New Prague, Minnesota

    @styless-ui/react-use-doropdown
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    @styless-ui/react-use-doropdown

     

    Zero Built-in Style UI React Library.

     


     

    Install

    via npm

    npm install @styless-ui/react-use-doropdown --save

    via yarn

    yarn add @styless-ui/react-use-doropdown

     

    Usage

    // import
    import { useDropdown } from "@styless-ui/react-use-doropdown";
    
    // in the function component
    const { Dropdown, isOpen, open, close, toggle } = useDropdown(initialIsOpen);

    Options

    • initialIsOpen: boolean

      • Optional
      • Defaults to false

    Returns

    • Dropdown: JSX.Element | null

      • Dropdown Component
    • isOpen: boolean

      • Dropdown Open State
    • open: () => void

      • A function to open the Dropdown.
    • close: () => void

      • A function to close the Dropdown.
    • toggle: () => void

      • A function to toggle the Dropdown.

     

    Example

    import clsx from "clsx";
    import { useDropdown } from "@styless-ui/react-use-doropdown";
    
    export const Component = () => {
      const { Dropdown, toggle, isOpen } = useDropdown();
    
      return (
        <section className="section">
          <h2 className="title">DropDown</h2>
          <div className={clsx(["dropdown", isOpen && "is-active"])}>
            <div className="dropdown-trigger">
              <button
                className="button"
                aria-haspopup="true"
                aria-controls="dropdown-menu"
                onClick={toggle}
              >
                <span>Dropdown button</span>
                <span className="icon is-small">
                  <i className="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <Dropdown className="dropdown-menu" id="dropdown-menu" role="menu">
              <div className="dropdown-content">
                <a href="#" className="dropdown-item">
                  Dropdown item
                </a>
                <a href="#" className="dropdown-item">
                  Other dropdown item
                </a>
                <a href="#" className="dropdown-item is-active">
                  Active dropdown item
                </a>
                <a href="#" className="dropdown-item">
                  Other dropdown item
                </a>
                <hr className="dropdown-divider" />
                <a href="#" className="dropdown-item">
                  With a divider
                </a>
              </div>
            </Dropdown>
          </div>
        </section>
      );
    };

     

    Licence

    This project is licensed under MIT license.

     

    Created and maintained by

    @yuki0410_ 🇯🇵

    Install

    npm i @styless-ui/react-use-doropdown

    DownloadsWeekly Downloads

    1

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    8.59 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuki0410