An tiny 1KB React component for accessible accordions / collapse UI
npm i squeezy
import React from 'react';
import { Squeezy } from 'squeezy';
const App = () => (
<div>
<h1>My App</h1>
<Squeezy
id="thing"
render={({ getButtonProps, getContentProps, isOpen }) => (
<div>
<div>
Stuff
<button {...getButtonProps({ className: 'whatever' })}>
See {isOpen ? 'more' : 'less'}
</button>
</div>
{isOpen ? (
<div {...getContentProps({ className: '...' })}>Stuff to show</div>
) : null}
</div>
)}
/>
</div>
);
export default App;
Required
An HTML id
attribute. Used by Squeezy to make the accordion accessible.
Log changes to Squeezy state to the console.
If you want to make Squeezy a controlled component (i.e. manage its state
externally), pass Squeezy an isOpen
prop.
Callback to run on state changes. If Squeezy is controlled, use this to set the next state externally. Otherwise, good place for side effects.
Render prop.
Prop getter that returns accessible accordion button props and click handlers
Prop getter that returns accessible accordion content props. Spread this on the body / main area that you want show/hide
Is the accordion open or close.
Close the accordion.
Open the accordion.
Toggle the accordion.
- Jared Palmer (@jaredpalmer)
MIT License