Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vercel/react-keyframes
Create frame-based animations in React
https://github.com/vercel/react-keyframes
animate animation frame keyframes react
Last synced: 27 days ago
JSON representation
Create frame-based animations in React
- Host: GitHub
- URL: https://github.com/vercel/react-keyframes
- Owner: vercel
- License: mit
- Created: 2016-03-13T17:06:13.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-07-18T20:54:08.000Z (over 1 year ago)
- Last Synced: 2024-09-30T13:01:22.635Z (about 1 month ago)
- Topics: animate, animation, frame, keyframes, react
- Language: TypeScript
- Homepage: https://npmjs.com/react-keyframes
- Size: 1.65 MB
- Stars: 620
- Watchers: 53
- Forks: 27
- Open Issues: 13
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# React Keyframes
A React component for creating frame-based animations.
## Example
The following example will render contents in `Frame` one at a time every 500 ms.
```js
import { Keyframes, Frame } from "react-keyframes";
function MyComponent() {
return (
This
This is
This is animated.
);
}
```
## Usage
Firstly, install the package:
```js
$ npm install --save react-keyframes
```
## API
### Keyframes
**``**
- Use `import { Keyframes } from 'react-keyframes'`
- The `component` prop specifies what component `Keyframes` renders as. You can pass the following:
- a React Component (i.e. ``)
- a React Fragment (i.e. ``)
- an HTML tag represented as a string (i.e. ``)
- If nothing is passed, it defaults to "span"
- Any additional, user-defined properties will become properties of the rendered component.
- It must have only `Frame` as children.
- Example:
```js
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return
foo
bar
;
}
}
```
### Frame
**``**
- Use `import { Frame } from 'react-keyframes'`
- The `duration` prop specifies the length of time that a frame should show (millisecond).
- You have to put `Frame` in the order you want them animated.
- Example:
```js
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return
foo
bar
;
}
}
```
## Contributing
- Run `npm run build` to transpile the source code
- Before submitting a PR, please run `npm run test`
- Please [be welcoming](http://contributor-covenant.org/)
## Author
Naoyuki Kanezawa ([@nkzawa](https://twitter.com/nkzawa)) - [Vercel](https://vercel.com)