Use easing functions with a pure React Hook
npm install use-easing![npm]()
> Single dependency on React
use-easing helps you ease a value using a React Hook.
This package also provides a few easings, you can specify any easing you want.
The package is written using TypeScript.
> Inspired by React CountUp
Package size: :package: 2.75kb!
Available in NPM, as use-easing!
``
npm install use-easing
or
`
yarn install use-easing
1. Clone repo git clone git@github.com:icyJoseph/use-easing.git
2. Install dependencies or npm i
3. Run or npm run start:demo
4. Go to
The hook encapsulates a single effect, which kicks off a process that invokes requestAnimationFrame,
until the easing value has arrived at its goal.
The effect depends on the end goal, the duration and the state of an internal trigger.
The hook returns, the value and a callback to alter the trigger.
The value will move toward this end goal, following a given easing curve and over a given period of time.
Measured in seconds.
`jsx`
function App() {
const { value } = useEasing({ end: 10, duration: 1 });
return value;
}
If you provide only the basic props, the component starts on mount and goes up to 10, over 1 second. By default it uses, the easeInQuad.
`tsx`
function App() {
const { value } = useEasing
return value;
}
If you are using TypeScript, bare in mind that easings are typed as shown.
`ts`
export const easeInQuad: easing = (
t: number,
b: number,
c: number,
d: number
) => c (t /= d) t + b;
You can also specify the type of value by passing a type parameter to useEasing. Or better yet, provide your own custom easing!
> t: current time, b: start, c: end - start, d: duration
By default the value starts at 0, but this can be specified with the start prop.
The effect will kick off the process as soon as possible, to prevent this, declare autoStart false.
The easing function. This function is invoked on every requestAnimationFrame, and it calculates the current value value.
More on easing functions here.
Applied to the outcome of the easing function. For example:
`js`
const floor = x => Math.floor(x);
const fixed = x => x.toFixed(2);
You could even create a map where each number translates to some other symbol!
Called when the effect is cleaned up.
Called when the process is paused.
Called when the process starts.
Called when the process` ends.