react-keyframes
react-keyframes copied to clipboard
Create frame-based animations in React
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.
import { Keyframes, Frame } from "react-keyframes";
function MyComponent() {
return (
<Keyframes>
<Frame duration={500}>This</Frame>
<Frame duration={500}>This is</Frame>
<Frame duration={500}>
This is <em>animated</em>.
</Frame>
</Keyframes>
);
}
Usage
Firstly, install the package:
$ npm install --save react-keyframes
API
Keyframes
<Keyframes { component = 'span' } />
- Use
import { Keyframes } from 'react-keyframes'
- The
component
prop specifies what componentKeyframes
renders as. You can pass the following:- a React Component (i.e.
<Keyframes component={myComponent} />
) - a React Fragment (i.e.
<Keyframes component={React.Fragment} />
) - an HTML tag represented as a string (i.e.
<Keyframes component='div' />
) - If nothing is passed, it defaults to "span"
- a React Component (i.e.
- Any additional, user-defined properties will become properties of the rendered component.
- It must have only
Frame
as children. - Example:
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes component="pre" delay={300} className="animation-test">
<Frame>foo</Frame>
<Frame>bar</Frame>
</Keyframes>;
}
}
Frame
<Frame { duration = 0 } />
- 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:
import { Component } from 'react';
import { Keyframes, Frame } from 'react-keyframes';
class extends Component {
render () {
return <Keyframes>
<Frame duration={100}>foo</Frame>
<Frame duration={200}>bar</Frame>
</Keyframes>;
}
}
Contributing
- Run
npm run build
to transpile the source code - Before submitting a PR, please run
npm run test
- Please be welcoming