react-create-keyframe
v1.0.0
Published
Helper to create and render keyframes on-demand in React
Downloads
4
Readme
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.