Awesome Open Source
Awesome Open Source

React Keyframes

Build Status XO code style

A React component for creating frame-based animations.

Demo

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 component Keyframes 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"
  • 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

Author

Naoyuki Kanezawa (@nkzawa) - ▲ZEIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,909
react (5,308
animation (1,044
frame (28
animate (22

Find Open Source By Browsing 7,000 Topics Across 59 Categories