react-create-keyframe

A simple helper to craete and render keyframes on on-demand. It (optionally) utilises React's new style hoisting feature when available.

Note: Style hoisting requires a canary version of React. Install via react@canary.

Installation

# npm
npm i --save react-create-keyframe
# yarn
yarn add react-create-keyframe
# pnpm
pnpm add react-create-keyframe

The Gist

import * as React from 'react'
import { createKeyframe } from 'react-create-keyframe'

const [animationName, node] = createKeyframe({
  from: {
    backgroundColor: 'red',
  },
  to: {
    backgroundColor: 'blue',
    transform: 'rotate(360deg)',
  },
})

function Component() {
  return (
    <>
      {node}
      <div
        style={{
          width: 50,
          height: 50,
          backgroundColor: 'red',
          animationName,
          animationDuration: '1s',
          animationIterationCount: 'infinite',
        }}
      />
    </>
  )
}

API Reference

createKeyframe

The only export of this package. It takes a keyframe style object and an optional nonce and returns both the keyframe name as well as a single React <style> node.

It converts camel case properties to dash case equivalent, but it does not add units to numbers.

| Parameter |  Type |  Description | | --------- | ------------ | ------------------------- | | keyframe | Keyframe   | A keyframe style object | | nonce | string? | (optional) nonce string |

Keyframe

Partial<Record<'from' | 'to' | `${number}%`, CSSProperties>>

A tuple of our keyframe animation name and a single <style> node.

Example

const keyframe = {
  // equivalent to 0%
  from: {
    color: 'red',
  },
  '50%': {
    color: 'green',
  },
  // equivalent to 100%
  to: {
    color: 'blue',
  },
}

const [animationName, node] = createKeyframe(keyframe)

Recipes

Adding Units

If you want units to be added to your properties automatically, you can create your own helper or utilise existing packages such as fela-plugin-unit.

Note: Most fela plugins are isolated and do not require fela to be installed or used.

import { createKeyframe, Keyframe } from 'react-create-keyframe'
import unit from 'fela-plugin-unit'

// further customise by passing a config object to the plugin
const addUnits = unit()

const keyframe = {
  from: {
    fontSize: 16,
  },
  to: {
    fontSize: 20,
  },
}

createKeyframe(addUnits(keyframe))

License

react-create-keyframe is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @robinweser and all the great contributors.