@commercetools-uikit/collapsible-motion
Version:
A component which allows building collapsible elements with an arbitrary height.
89 lines (63 loc) • 5.19 kB
Markdown
<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `yarn generate-readme` script. -->
# CollapsibleMotion
## Description
A component which allows building collapsible elements with an arbitrary height. The component can be controlled or uncontrolled, depending if the `isClosed` props is defined or not. A controlled component requires the `onToggle` prop additionally.
## Details
Animating a div from `height: 0` to `height: auto` is something the browser will refuse to do out of the box, because calculations of this animation would be expensive.
There are [many existing workaround](https://css-tricks.com/using-css-transitions-auto-dimensions/) which all have their different tradeoffs.
`CollapsibleMotion` uses a nice workaround which allows the browser to run this animation. `CollapsibleMotion` measures the resulting since and then animates between `height: 0` and the resulting size (at 99% of the animation). At the end of the animation, it sets the `height` back to `auto`.
This component also supports passing in a `minHeight` prop. By default this is 0.
Technically, we need to dynamically create the keyframes for this animation.
## Installation
```
yarn add @commercetools-uikit/collapsible-motion
```
```
npm --save install @commercetools-uikit/collapsible-motion
```
Additionally install the peer dependencies (if not present)
```
yarn add react
```
```
npm --save install react
```
## Usage
```jsx
import CollapsibleMotion from '@commercetools-uikit/collapsible-motion';
const Example = () => (
<CollapsibleMotion>
{({ isOpen, toggle, containerStyles, registerContentNode }) => (
<div>
<button data-testid="button" onClick={toggle}>
{isOpen ? 'Close' : 'Open'}
</button>
<div data-testid="container-node" style={containerStyles}>
<div data-testid="content-node" ref={registerContentNode}>
Content
</div>
</div>
</div>
)}
</CollapsibleMotion>
);
export default Example;
```
## Properties
| Props | Type | Required | Default | Description |
| ----------------- | ---------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | `Function`<br/>[See signature.](#signature-children) | ✅ | | A render function, called with the following named arguments: `isOpen` (boolean), `toggle` (function),
`containerStyles` (css-in-js object), `registerContentNode` (React reference to be used on the animated container).
<br/>
Siganture: `({ isOpen, containerStyles, toggle, registerContentNode }) => React.node` |
| `isClosed` | `boolean` | | | |
| `onToggle` | `Function`<br/>[See signature.](#signature-ontoggle) | | | A callback function called when the `toggle` function is called. This prop is required when the component is **controlled**. |
| `minHeight` | `number` | | | The minimal height of the container being animated. |
| `isDefaultClosed` | `boolean` | | | The initial value to the internal toggle state `isOpen`. |
## Signatures
### Signature `children`
```ts
(options: TRenderFunctionOptions) => ReactNode;
```
### Signature `onToggle`
```ts
() => void
```