Dropdown

A menu that appears below a title when it is selected and remains until used or dismissed.

Preview

Usage

It uses the useDropdown hook for handling the logic.

npm i react-hartan

import { Dropdown } from "react-hartan"

function App() {

  return (
    <>
      <Dropdown></Dropdown>
    </>
  )
}

export default App

Customization With Props

• listItem -> This prop accepts an array of nodes, used as the dropdown list, to be sent by user.

• buttonText -> This prop accepts a value, used as the button name.

• onClickFunction -> The custom on click function passed by the user for handling click logic.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userDropdownStyle -> The custom styling prop for the full dropdown.

• userDropdownListStyle -> The custom styling prop for the list container containing list items.

• userDropdownListItemStyle -> The custom styling prop for each list item inside the list container.

• userButtonStyle -> The custom styling for the button opening/closing dropdown.

Default

import { Dropdown } from "react-hartan"

function App() {

  return (
    <>
      <Dropdown></Dropdown>
    </>
  )
}

export default App

With Custom Props

// App.css
.bg-red{
   padding: 2rem;
   background-color: red;
}

.bg-pink{
   background-color: pink;
}


// App.jsx
import { Dropdown } from "react-hartan"

function App() {

  const list = [
      "Hindi",
      "English",
  ];
  
  return (
    <>
      <Dropdown listItem={list} userDropdownListStyle={"bg-red"} userDropdownListItem={"bg-pink"}></Dropdown>
    </>
  )
}

export default App

Component Code

This is the code for Dropdown component.

Dropdown.jsx

import useDropdown from "../../Hooks/Dropdown"
import dropdownStyle from "./Dropdown.module.css"
import PropTypes from "prop-types"

const list = [
    "Item 1",
    "Item 2",
    "Item 3",
    "Item 4"
];

function onClickItem(val){
    console.log(val);
}

export default function Dropdown({ listItem = list, buttonText = "Dropdown", onClickFunction = onClickItem, id, userDropdownStyle, userDropdownListStyle, userDropdownListItemStyle, userButtonStyle }) {

    const [isOpen, setIsOpen, handleDropdownButtonClick, dropdownText] = useDropdown(buttonText, onClickFunction);

    return (
        <section className={`${dropdownStyle.dropdown} ${userDropdownStyle}`}>
            <button className={`${dropdownStyle.dropdownBtn} ${userButtonStyle}`} onClick={() => setIsOpen(!isOpen)}>{dropdownText}
                {
                    isOpen ? (
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z" /></svg>
                        </span>
                    ) :
                        (
                            <span>
                                <svg xmlns="http://www.w3.org/2000/svg" height="14" width="12.25" viewBox="0 0 448 512"><path fill="#000000" d="M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>
                            </span>
                        )
                }
            </button>
            <ul className={`${dropdownStyle.dropdownList} ${userDropdownListStyle}`}>
                {
                    isOpen && (
                        listItem.map((listText, id) => {
                            return <li className={`${dropdownStyle.dropdownListItem} ${userDropdownListItemStyle}`} key={id} onClick={handleDropdownButtonClick}><span>{listText}</span></li>
                        })
                    )
                }
            </ul>
        </section>
    )
}

Dropdown.propTypes = {
    listItem: PropTypes.arrayOf(PropTypes.node),
    buttonText: PropTypes.node,
    onClickFunction: PropTypes.func,
    id: PropTypes.string,
    userDropdownStyle: PropTypes.string,
    userButtonStyle: PropTypes.string,
    userDropdownList: PropTypes.string,
    userDropdownListItem: PropTypes.string
};

Dropdown.module.css

.dropdown {
    width: 16rem;
}

/* Opening/Closing Dropdown button */
.dropdownBtn {
    background-color: #1e90ff;
    padding: .75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: .5rem;
    width: 100%;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
}

/* dropdown icon change on open/close */
.dropdownBtn span {
    display: flex;
    justify-content: center;
    align-items: center;

}

/* dropdown list container */
.dropdownList {
    background-color: #1e90ff;
    margin-top: .5rem;
    border-radius: .5rem;
}

/* each item inside the dropdown list container */
.dropdownListItem {
    list-style: none;
    padding: .75rem 1rem;
    cursor: pointer;
}

/* span text of each item inside the dropdown list container */
.dropdownListItem span {
    text-decoration: none;
    color: #000000;
    font-weight: 500;
    font-size: 1.5rem;
    transition: .1s;
}