Hartan Docs
  • 👋Welcome
  • 🗃️Components
    • Accordion
    • Button
    • Card
    • Carousel
    • Dropdown
    • Footer
    • Form
      • SimpleForm
    • Hero
    • Navbar
    • Popup
    • Sidemenu
    • Snippet
    • Statistics
    • Team
    • Testimonial
  • 🪝Hooks
    • useAccordion
    • useCarousel
    • useCopy
    • useDropdown
    • useFetch
    • useForm
    • usePopup
    • useSidebar
  • 🔴Important
  • ✍️CONTRIBUTING.md
Powered by GitBook
On this page
  1. Hooks

useAccordion

PreviousTestimonialNextuseCarousel

Last updated 1 month ago

The useAccordion hook is used inside the component. This hook handles the collapse logic, inside the Accordion component.

This hook is an internal hook and is not available for the users since it's not exposed as a part of this library.

Code


import { useState } from "react"

export default function useAccordion(){
    const [openAccordion, setOpenAccordion] = useState(null);

    function toggle(id) {
        if (openAccordion == id) {
            return setOpenAccordion(null);
        }

        setOpenAccordion(id);
    }

    return [openAccordion, toggle];
}

Explanation

  • It doesn't accept any parameters.

  • It returns the following:

    • openAccordion - the current state for the label.

    • toggle - a function to toggle the label state.

As you can see above it uses the hook of the React internally for toggling the state of each accordion label.

🪝
Accordion
useState