@bufferapp/react-keyframes
v0.2.5
Published
[![Build Status](https://travis-ci.org/zeit/react-keyframes.svg?branch=master)](https://travis-ci.org/zeit/react-keyframes) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/sindresorhus/xo)
Downloads
2,065
Maintainers
Keywords
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.
import { render } from 'react-dom';
import { Keyframes, Frame } from 'react-keyframes';
render(
<Keyframes>
<Frame duration={500}>This</Frame>
<Frame duration={500}>This is</Frame>
<Frame duration={500}>This is <em>animated</em>.</Frame>
</Keyframes>,
document.getElementById('container')
);
Documentation
Installation
$ npm install react-keyframes --save
API
Keyframes
<Keyframes { component = 'span', delay = 0, loop = 1, onStart, onEnd } />
Use
import { Keyframes } from 'react-keyframes'
orrequire('react-keyframes').Keyframes
.The
component
prop specifies what componentKeyframes
renders as.The
delay
prop specifies when the animation should start (millisecond).The
loop
prop specifies the number of times an animation cycle should be played. Settrue
to repeat forever.The
onStart
function is invoked upon animation startThe
onEnd
function is invoked upon animation endAny 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'
orrequire('react-keyframes').Frame
.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
gulp help
to see available tasks. - Before submitting a PR, please run
gulp lint
andnpm test
. - We use
standard
+ semicolons. - Please be welcoming.
Credits
- Copyright © 2016 Zeit, Inc and project authors.
- Licensed under MIT.
- ▲