Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tannerlinsley/react-show
⚛️ A 3kb css animation component for React.
https://github.com/tannerlinsley/react-show
Last synced: 13 days ago
JSON representation
⚛️ A 3kb css animation component for React.
- Host: GitHub
- URL: https://github.com/tannerlinsley/react-show
- Owner: tannerlinsley
- Created: 2017-08-05T22:52:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T01:01:08.000Z (almost 2 years ago)
- Last Synced: 2024-10-20T00:37:58.007Z (23 days ago)
- Language: JavaScript
- Homepage: https://codesandbox.io/s/2v66j7pm8y
- Size: 2.07 MB
- Stars: 402
- Watchers: 5
- Forks: 30
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# React Show
A css powered (graphics accelerated) animation component for React.
[](https://codesandbox.io/s/2v66j7pm8y)
## Why?
- You need to animate, reveal, collapse your react components. Everyone does!
- You want it smoothly animated, even on mobile. Like butter on a glide-cam!
- You don't want to bloat your app with custom physics-based animation frameworks, request-animation-frame-happy animation loops or even jQuery...heaven forbid.
## Features
- 3.7 kb gzipped
- Powered by native CSS animations & transitions on the GPU when possible
- Animates `height: auto;` and `width: auto;`
## Demo
- [Codesandbox.io](https://codesandbox.io/s/2v66j7pm8y)
## Chat with us on Spectrum!
Need Help? [Click here to sign up for the React-Tools Spectrum community](https://spectrum.chat/react-show). We are constantly discussing implementation details and answering questions. :)
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Simple Usage](#simple-usage)
- [Advanced Usage](#advanced-usage)
- [Duration, Easing, Transition Properties](#duration-easing-transition-properties)
- [Lifecycle](#lifecycle)
- [Easing Options](#easing-options)
- [API](#api)
## Installation
```bash
$ yarn add react-show
# or
$ npm install --save react-show
```
## Usage
#### Simple Usage
You can create a simple expander component with the `Animate` component!
```javascript
import { Animate } from "react-show";
const SimpleExample = () => (
Hello world!
);
```
#### Advanced Usage
You can create a simple expander component with the `Animate` component!
```javascript
import { Animate } from "react-show";
const SimpleExample = () => (
(or custom) component as the wrapper instead of a
style={{
// The permanent styles for the component
height: `${Math.random() * 100}px`,
background: "white"
}}
start={{
// The starting styles for the hidden component.
opacity: 0,
height: 0
}}
enter={{
// These styles will be applied when the component enters
opacity: 1,
height: 'auto'
background: "green"
}}
leave={{
// these styles will be applied when the component leaves
opacity: 0,
height: 0,
background: "red"
}}
>
Hello world!
);
```
## Duration, Easing, Transition Properties
You can configure `duration`, `easing`, and `transition` by:
- Setting a component-wide default with the `duration`, `easing`, and `transitionProperty` props.
- Optionally using a lifecycle specific style property like `transitionDuration`, `transitionTimingFunction`, `transitionProperty` or even `transitionDelay`.
ReactShow comes with a wide variety of easings built-in! See [Easing Options](#easing-options) for a full list.
```javascript
import { Animate } from "react-show";
const DurationAndEasingExample = () => (
Hello world!
);
```
## Lifecycle
React-Show uses the following lifecycle to determine which styles to show:
**When `show === true`**
- If component is not mounted
- If `transitionOnMount === true`
- The `start` styles are set as the initial style
- If `transitionOnMount === false`
- The `enter` styles are set as the initial style
- The component is mounted
- If component is already mounted
- The `enter` styles are set as the initial style
- If a `width` or `height` style is/was set to `auto`
- The `display: block` and `overflow: hidden` styles are temporarily applied
- The component scrollWidth/scrollHeight is measured
- The `display: block` and `overflow: hidden` styles are removed
- The `enter` styles are applied and component waits until all transitions complete
- All lifecycle styles are removed and component waits until all transitions complete
- The `onFinish` prop function is fired
**When `show === false`**
- If a `width` or `height` style is/was set to `auto`
- The `display: block` and `overflow: hidden` styles are temporarily applied
- The component scrollWidth/scrollHeight is measured
- The `display: block` and `overflow: hidden` styles are removed
- The `leave` or `start` styles are applied and component waits until all transitions complete
- If `stayMounted === false`
- The component is unmounted
## Easing Options
React-Show comes packaged with some awesome easings that are accessible via `Animate.easings`. They are extremely simple to use too:
```javascript
import { Animate } from "react-show";
const SimpleExample = () => (
Hello world!
);
```
Below is a full list of the available easings exported at `Animate.easings`
```javascript
import { easings } from "react-show";
easings ===
{
// Cubic
easeInCubic: "cubic-bezier(0.550, 0.055, 0.675, 0.190)",
easeOutCubic: "cubic-bezier(0.215, 0.610, 0.355, 1.000)",
easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1.000)",
// Circ
easeInCirc: "cubic-bezier(0.600, 0.040, 0.980, 0.335)",
easeOutCirc: "cubic-bezier(0.075, 0.820, 0.165, 1.000)",
easeInOutCirc: "cubic-bezier(0.785, 0.135, 0.150, 0.860)",
// Expo
easeInExpo: "cubic-bezier(0.950, 0.050, 0.795, 0.035)",
easeOutExpo: "cubic-bezier(0.190, 1.000, 0.220, 1.000)",
easeInOutExpo: "cubic-bezier(1.000, 0.000, 0.000, 1.000)",
// Quad
easeInQuad: "cubic-bezier(0.550, 0.085, 0.680, 0.530)",
easeOutQuad: "cubic-bezier(0.250, 0.460, 0.450, 0.940)",
easeInOutQuad: "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
// Quart
easeInQuart: "cubic-bezier(0.895, 0.030, 0.685, 0.220)",
easeOutQuart: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
easeInOutQuart: "cubic-bezier(0.770, 0.000, 0.175, 1.000)",
// Quint
easeInQuint: "cubic-bezier(0.755, 0.050, 0.855, 0.060)",
easeOutQuint: "cubic-bezier(0.230, 1.000, 0.320, 1.000)",
easeInOutQuint: "cubic-bezier(0.860, 0.000, 0.070, 1.000)",
// Sine
easeInSine: "cubic-bezier(0.470, 0.000, 0.745, 0.715)",
easeOutSine: "cubic-bezier(0.390, 0.575, 0.565, 1.000)",
easeInOutSine: "cubic-bezier(0.445, 0.050, 0.550, 0.950)",
// Back
easeInBack: "cubic-bezier(0.600, -0.280, 0.735, 0.045)",
easeOutBack: "cubic-bezier(0.175, 0.885, 0.320, 1.275)",
easeInOutBack: "cubic-bezier(0.680, -0.550, 0.265, 1.550)"
};
```
## API
#### ``
###### Props
| Prop | Required | Default Value | Description |
| :------------------- | :------- | :------------- | :------------------------------------------------------------------------- |
| `show` | `true` | `false` | Determines whether to "show" the content or not. |
| `duration` | | `300` | The `transition-duration` of the transition used to show the content |
| `easing` | | `easeOutQuint` | The `transition-timing-function` used to show the content |
| `transitionProperty` | | `all` | The `transition-property` used to show the content |
| `preMount` | | `false` | If `true`, element will mount on first render if `show === false` |
| `stayMounted` | | `false` | If `true`, element will stay mounted when `show === false` |
| `transitionOnMount` | | `false` | If `true`, element will animate from the `start` style on mount |
| `style` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |
| `start` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |
| `enter` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |
| `leave` | | `undefined` | React style object (See [lifecycle](#lifecycle) for more details) |
| `component` | | `div` | Use a (or custom) component as the wrapper instead of a |
| `onFinish` | | `noop` | Function called when the component finishes transitioning. |
| `onMount` | | `noop` | Function called when the children passed to Animate are mounted. |
| `onWillUnmount` | | `noop` | Function called right before the children passed to Animate are unmounted. |
## Contributing
We are always looking for people to help us grow `react-show`'s capabilities and examples. If you have an issue, feature request, or pull request, let us know!
## License
React Show uses the MIT license. For more information on this license, [click here](https://github.com/react-tools/react-show/blob/master/LICENSE).