https://github.com/jaredpalmer/squeezy
1 kB React component for accessible accordions / collapse UI
https://github.com/jaredpalmer/squeezy
accordion react render-props
Last synced: about 1 year ago
JSON representation
1 kB React component for accessible accordions / collapse UI
- Host: GitHub
- URL: https://github.com/jaredpalmer/squeezy
- Owner: jaredpalmer
- License: mit
- Created: 2017-12-04T16:03:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-04T16:13:57.000Z (over 8 years ago)
- Last Synced: 2025-03-29T08:22:17.516Z (about 1 year ago)
- Topics: accordion, react, render-props
- Language: TypeScript
- Homepage:
- Size: 54.7 KB
- Stars: 29
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Squeezy
An tiny 1KB React component for accessible accordions / collapse UI
```
npm i squeezy
```
- [Usage](#usage)
- [API](#api)
- [`` Props](#squeezy-props)
- [`id: string`](#id-string)
- [`debug?: boolean`](#debug-boolean)
- [`isOpen?: boolean`](#isopen-boolean)
- [`onToggle?: (state: SqueezyState, helpers: SqueezyActions) => void`](#ontoggle-state-squeezystate-helpers-squeezyactions--void)
- [`render: (props: SqueezyProps) => React.ReactNode`](#render-props-squeezyprops--reactreactnode)
- [Squeezy State and Helpers](#squeezy-state-and-helpers)
- [`getButtonProps(moreProps: any) => void`](#getbuttonpropsmoreprops-any--void)
- [`getContentProps(moreProps: any) => void`](#getcontentpropsmoreprops-any--void)
- [`isOpen: boolean`](#isopen-boolean)
- [`close: () => void`](#close---void)
- [`open: () => void`](#open---void)
- [`toggle: () => void`](#toggle---void)
- [Inspiration](#inspiration)
- [Author](#author)
## Usage
```js
import React from 'react';
import { Squeezy } from 'squeezy';
const App = () => (
My App
(
Stuff
See {isOpen ? 'more' : 'less'}
{isOpen ? (
Stuff to show
) : null}
)}
/>
);
export default App;
```
## API
### `` Props
#### `id: string`
**Required**
An HTML `id` attribute. Used by Squeezy to make the accordion accessible.
#### `debug?: boolean`
Log changes to Squeezy state to the console.
#### `isOpen?: boolean`
If you want to make Squeezy a controlled component (i.e. manage its state
externally), pass Squeezy an `isOpen` prop.
#### `onToggle?: (state: SqueezyState, helpers: SqueezyActions) => void`
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: (props: SqueezyProps) => React.ReactNode`
Render prop.
### Squeezy State and Helpers
#### `getButtonProps(moreProps: any) => void`
Prop getter that returns accessible accordion button props and click handlers
#### `getContentProps(moreProps: any) => void`
Prop getter that returns accessible accordion content props. Spread this on the
body / main area that you want show/hide
#### `isOpen: boolean`
Is the accordion open or close.
#### `close: () => void`
Close the accordion.
#### `open: () => void`
Open the accordion.
#### `toggle: () => void`
Toggle the accordion.
## Inspiration
* [react-toggled](https://github.com/kentcdodds/react-toggled)
## Author
* Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer))
---
MIT License