Accordion
Allows the user to show and hide sections of related content on a page.
version
5.6.0
install
yarn add @welcome-ui/accordion
usage
import { Accordion, useAccordion } from '@welcome-ui/accordion'
About #
Built with Ariakit for a better accessibility 🌈
Usage #
Open at start #
Add defaultOpen
options on useAccordion
to open at start the accordion
With a custom icon #
Customize the icon with a node element on property icon
Note that the custom icon's size property will be set to small
useAccordion #
We use useDisclosureStore
from Ariakit Disclosure for the state of the accordion with the animated
flag set to true
by default.
Pass options to useAccordion
:
defaultOpen
: e.g.const accordion = useAccordion({ defaultOpen: true })
And the hook returns (among other things):
useState('open')
: whether the accordion is currently openhide
: a function to hide the accordion
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
title | string Element | ||
icon | Element | <RightIcon /> | |
store | DisclosureStoreFunctions & Store<DisclosureStoreState> & { useState: UseState<DisclosureStoreState>; } store from useAccordion() |