RAF service
The RAF (short for requestAnimationFrame
) service will help you manage your render loops.
Usage
js
import { useRaf } from '@studiometa/js-toolkit';
const { add, remove, props } = useRaf();
add('custom-id', (props) => {
console.log(props.time); // latest `performance.now()`
console.log(props.delta); // time elapsed since the last frame
// Read the DOM and compute values...
return () => {
// Update the DOM...
};
});
// Get the latest prop object
console.log(props());
// Remove the callback
remove('custom-id');
Props
time
- Type:
Number
The time elapsed since the time origin.
TIP
Read the performance.now()
documentation to find out more on the time origin.
delta
- Type:
Number
The time elapsed between the current frame and the previous frame in milliseconds. This value is 0
on the first frame and represents the frame duration for subsequent frames.
TIP
The delta
property is useful for creating frame-rate independent animations and calculations. You can use it to scale movement or animations based on the actual time elapsed between frames.