0.0.19 • Published 3 years ago
react-spring-accordion v0.0.19
React Spring Accordion
Accordion based on react-spring
Install
yarn add react-spring-accordion
or
npm install react-spring-accordion
Usage
Basic
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>
)
Allow multiple opened
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>
)
useAccordionContext
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>
)
}
Access all methods within 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>
)
onChange
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>
)
Access computed value 'open' in Heading or Child
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>
)
Todo
- Accessibility
0.0.19
3 years ago
0.0.18
4 years ago
0.0.17
4 years ago
0.0.16
4 years ago
0.0.15
4 years ago
0.0.14
4 years ago
0.0.13
4 years ago
0.0.11
4 years ago
0.0.12
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago