https://github.com/mleko/react-animate-hoc
React animation/easing higher order component
https://github.com/mleko/react-animate-hoc
animation decorator easing higher-order-component hoc react transition typescript
Last synced: 3 months ago
JSON representation
React animation/easing higher order component
- Host: GitHub
- URL: https://github.com/mleko/react-animate-hoc
- Owner: mleko
- License: mit
- Created: 2017-01-09T20:45:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-19T10:17:20.000Z (about 9 years ago)
- Last Synced: 2025-03-29T08:34:39.345Z (about 1 year ago)
- Topics: animation, decorator, easing, higher-order-component, hoc, react, transition, typescript
- Language: TypeScript
- Homepage: https://mleko.gitlab.io/react-animate-hoc/
- Size: 38.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-animate-hoc
> Higher-order component easing/animating prop changes for React
[](https://nodei.co/npm/react-animate-hoc/)
## Demo
Live demo is available https://mleko.gitlab.io/react-animate-hoc/
## Installation
Library can be installed via [npm](https://www.npmjs.com/package/react-animate-hoc).
```
$ npm install react-animate-hoc
```
## Usage
Component you wish to animate
```
export function ColorBox(p: RgbColor): JSX.Element {
let style = {
height: 50,
width: 50,
backgroundColor: `rgb(${p.r.toFixed()},${p.g.toFixed()},${p.b.toFixed()}`,
border: "1px black solid",
display: "inline-block",
margin: 3
};
return (
);
}
```
to animate property transition wrap component in `animate` HOC
```
export const AnimatedColorBox = animate()(ColorBox)
```
or annotate new component
```
@animate()
export class AnnotatedColorBox extends React.Component {
public render(): JSX.Element {
return ();
}
}
```
Now you can use animated components just like regular one
```
```
## Running examples
*Have `node.js` and `npm` installed.*
1. Clone this repo.
2. Run `npm install` to get all dependencies.
3. Run `npm start` to run Webpack dev server.
### [License (MIT)](LICENSE.md)