Käytä useCollapse-hookia, kun haluat piilottaa ja näyttää sisältöä haitarielementin tapaan. UseCollapse-hookia kannattaa hyödyntää vain,
jos valmiimmat komponentit, kuten Accordion tai Collapse eivät sovellu käyttötarkoitukseen.
Esimerkki
function UseCollapseExample() {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef(null);
const toggle = useCollapse(ref, isOpen);
useEffect(() => {
toggle();
}, [isOpen, toggle]);
return (
<>
<h3 className="kds-leading-reset kds-font-normal kds-font-body kds-my-0">
<Button
appearance="link"
iconAfter={isOpen ? <IconUiCaretUp /> : <IconUiCaretDown />}
onClick={() => setIsOpen(!isOpen)}
aria-expanded={isOpen}
aria-controls="my-collapse"
>
{isOpen ? "Näytä vähemmän" : "Näytä lisää"}
</Button>
</h3>
<div className="kds-mt-4" ref={ref} id="my-collapse">
<Text>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros
ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu.
</Text>
<List>
<ListItem>Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit.</ListItem>
<ListItem>Sed augue orci, lacinia eu tincidunt et eleifend nec lacus.</ListItem>
<ListItem>Donec ultricies nisl ut felis, suspendisse potenti.</ListItem>
</List>
</div>
</>
);
}