Käyttötarkoitus
UseToggle-hook auttaa toteuttamaan boolean-tyyppisten tilojen (päällä ja pois päältä) hallintaa.
Se helpottaa toteutusta tilanteissa, joissa tiloja tarvitaan useita, esimerkiksi Accordion- ja Table-komponenttien kanssa.
Esimerkki
const data = [
{
id: "0",
title: "Mikä toimeentulotuki on?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin risus est, vel consequat diam maximus vitae. In hac habitasse platea dictumst.",
},
{
id: "1",
title: "Miten muut tuet vaikuttavat toimeentulotukeen?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin risus est, vel consequat diam maximus vitae. In hac habitasse platea dictumst.",
},
{
id: "2",
title: "Miten perustoimeentulotuki lasketaan?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin risus est, vel consequat diam maximus vitae. In hac habitasse platea dictumst.",
},
{
id: "3",
title: "Miten voin arvioida, voisinko saada perustoimeentulotukea?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sollicitudin risus est, vel consequat diam maximus vitae. In hac habitasse platea dictumst.",
},
];
const UseToggleExample = (props) => {
const [multiple, setMultiple] = useState(true);
const { isToggleOn: isOpen, flipToggle: toggleAccordion } = useToggle({ multiple });
return (
<>
<Button appearance="outline" onClick={() => setMultiple(!multiple)} className="kds-mb-4">
Avaa kerralla useampi: {multiple ? "kyllä" : "ei"}
</Button>
{data.map(({ id, title, content }) => (
<Accordion id={id} isOpen={isOpen(id)} key={title}>
<AccordionToggle onClick={() => toggleAccordion(id)}>
<AccordionTitle>{title}</AccordionTitle>
</AccordionToggle>
<AccordionBody>
<Text>{content}</Text>
</AccordionBody>
</Accordion>
))}
</>
);
};
render(<UseToggleExample />);