📏 React Position Tools

Contexts and Hooks for tracking the position of everything in the DOM including:

Window Size, Elements Positions, and Cursor Position

Example Usage

Here you can see the useCursorTracking hook being used to animate a card while moving a cursor over it.

image

While not required, it is recommended to use a library such as React-Spring to apply any animations you wish to trigger from event callbacks.

Constantly writing to the DOM via React (or any other method) can degrade performance of your site.

Simply using CSS transitions and animations can also be costly if they are not written with care.

© 2022
🐞

Window Properties

WindowWidth: undefinedpx

WindowHeight: undefinedpx