react-keyframes icon indicating copy to clipboard operation
react-keyframes copied to clipboard

Create frame-based animations in React

React Keyframes

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) - Vercel