@zendeskgarden/container-accordion
v3.0.8
Published
Containers relating to accordions in the Garden Design System
Downloads
28,727
Maintainers
Readme
@zendeskgarden/container-accordion
This package includes containers relating to accordions in the Garden Design System.
Installation
npm install @zendeskgarden/container-accordion
Usage
This container implements the accordion design pattern and can be used to build an accordion component. Check out storybook for live examples.
useAccordion
The useAccordion
hook manages toggle state and required accessibility
attributes for a group of sections.
import { useAccordion } from '@zendeskgarden/container-accordion';
const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => {
const { getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections } =
useAccordion({
sections,
expandedSections: [0],
expandable,
collapsible
});
return (
<>
{sections.map((section, index) => {
const disabled = disabledSections.indexOf(index) !== -1;
const hidden = expandedSections.indexOf(index) === -1;
return (
<div key={index}>
<h2 {...getHeaderProps({ role: null, ariaLevel: null })}>
<button
{...getTriggerProps({
index,
role: null,
tabIndex: null,
disabled,
style: { width: '100%' }
})}
>
{index}
</button>
</h2>
<section
{...getPanelProps({
index,
role: null,
hidden
})}
>
{section}
</section>
</div>
);
})}
</>
);
};
return <Accordion expandable={true} collapsible={true} />;
AccordionContainer
AccordionContainer
is a render-prop wrapper for the useAccordion
hook.
import { AccordionContainer } from '@zendeskgarden/container-accordion';
const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => (
<AccordionContainer sections={sections} expandable={expandable} collapsible={collapsible}>
{({ getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections }) => (
<>
{sections.map((section, index) => {
const disabled = disabledSections.indexOf(index) !== -1;
const hidden = expandedSections.indexOf(index) === -1;
return (
<div key={index}>
<h2 {...getHeaderProps({ role: null, ariaLevel: null })}>
<button
{...getTriggerProps({
index,
role: null,
tabIndex: null,
disabled,
style: { width: '100%' }
})}
>
{index}
</button>
</h2>
<section
{...getPanelProps({
index,
role: null,
hidden
})}
>
{section}
</section>
</div>
);
})}
</>
)}
</AccordionContainer>
);
return <Accordion expandable={true} collapsible={true} />;