Accordion based on react-spring
yarn add react-spring-accordion
or
npm install react-spring-accordion
import Accordion from 'react-spring-accordion';
const App = () => (
<Accordion.Wrapper>
<Accordion.Item>
<Accordion.Heading>Heading</Accordion.Heading>
<Accordion.Child>Child</Accordion.Child>
</Accordion.Item>
</Accordion.Wrapper>
)
import Accordion from 'react-spring-accordion';
const App = () => (
<Accordion.Wrapper allowMultipleOpened>
<Accordion.Item>
<Accordion.Heading>Heading</Accordion.Heading>
<Accordion.Child>Child</Accordion.Child>
</Accordion.Item>
</Accordion.Wrapper>
)
import Accordion, { useAccordionContext } from 'react-spring-accordion';
const App = () => {
const { openedItems, setOpenedItems, openElement } = useAccordionContext();
return (
<Accordion.Wrapper>
<Accordion.Item>
<Accordion.Heading>Heading</Accordion.Heading>
<Accordion.Child>Child</Accordion.Child>
</Accordion.Item>
</Accordion.Wrapper>
)
}
import Accordion from 'react-spring-accordion';
const App = () => (
<Accordion.Wrapper>
{({ openedItems, setOpenedItems, openElement }) => (
<Accordion.Item>
<Accordion.Heading>Heading</Accordion.Heading>
<Accordion.Child>Child</Accordion.Child>
</Accordion.Item>
)}
</Accordion.Wrapper>
)
import Accordion from 'react-spring-accordion';
const App = () => (
<Accordion.Wrapper onChange={openedItems => console.log(openedItems)}>
<Accordion.Item>
<Accordion.Heading>Heading</Accordion.Heading>
<Accordion.Child>Child</Accordion.Child>
</Accordion.Item>
</Accordion.Wrapper>
)
import Accordion from 'react-spring-accordion';
const App = () => (
<Accordion.Wrapper onChange={openedItems => console.log(openedItems)}>
<Accordion.Item>
<Accordion.Heading>
{open => <div>{open ? `Open` : `Close`}</div>}
</Accordion.Heading>
<Accordion.Child>
{open => <div>{open ? `Open` : `Close`}</div>}
</Accordion.Child>
</Accordion.Item>
</Accordion.Wrapper>
)
- Accessibility