https://github.com/robinweser/react-create-keyframe
Helper to create and render keyframes on-demand in React
https://github.com/robinweser/react-create-keyframe
css keyframes react react-component
Last synced: 11 months ago
JSON representation
Helper to create and render keyframes on-demand in React
- Host: GitHub
- URL: https://github.com/robinweser/react-create-keyframe
- Owner: robinweser
- Created: 2024-06-14T16:30:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-16T16:56:55.000Z (over 1 year ago)
- Last Synced: 2025-02-16T07:59:32.789Z (11 months ago)
- Topics: css, keyframes, react, react-component
- Language: TypeScript
- Homepage:
- Size: 62.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-create-keyframe
A simple helper to create and render keyframes on on-demand.
It (optionally) utilises React's new [style hoisting feature](https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet) when available.
> **Note**: Style hoisting requires a canary version of React. Install via `react@canary`.
## Installation
```sh
# npm
npm i --save react-create-keyframe
# yarn
yarn add react-create-keyframe
# pnpm
pnpm add react-create-keyframe
```
## The Gist
```tsx
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}
>
)
}
```
## 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 `` node.
It converts camel case properties to dash case equivalent, but it does not add units to numbers.
| Parameter | Type | Description |
| --------- | ----------------------- | ------------------------- |
| keyframe | [Keyframe](#keyframe) | A keyframe style object |
| nonce | `string?` | (_optional_) nonce string |
#### Keyframe
```
Partial<Record<'from' | 'to' | `${number}%`, CSSProperties>>
```
#### Example
```ts
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](https://github.com/robinweser/fela/tree/master/packages/fela-plugin-unit#fela-plugin-unit).
> **Note**: Most fela plugins are isolated and do not require fela to be installed or used.
```ts
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](http://opensource.org/licenses/MIT).<br>
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br>
Created with ♥ by [@robinweser](http://weser.io) and all the great contributors.