Scroll to React elements with custom timing function support
npm install use-scroll-to-2Scroll to React elements with custom timing function support.
``bash`
npm install use-scroll-to-2
Trigger manually:
`jsx
import React from "react";
import { useScrollTo } from "use-scroll-to-2";
function App() {
const [ref, scroll] = useScrollTo();
return (
Trigger on mount:
`jsx
import React from "react";
import { useScrollTo } from "use-scroll-to-2";function App() {
const [ref] = useScrollTo({ auto: true });
return (
Window will scroll to this element, as soon as it mounts.
);
}
`Configuration
All configuration options are optional.
$3
Scroll duration in milliseconds. Default
480.$3
Scroll delay in milliseconds. Default
0.$3
An easing function. This expects a function returned by excellent
bezier-easing library.
For convenience it is re-exported as
bezier in this library.`jsx
import { bezier, useScrollTo } from "use-scroll-to-2";useScrollTo({
duration: 600,
easing: bezier(0.42, 0, 0.58, 1),
});
`Default:
bezier(0.25, 0.1, 0.25, 1).$3
Start scrolling on element mount. Default
false.$3
A top offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default:
0.`jsx
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going up, 1 -> down
});
`$3
A left offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default:
0.`jsx
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going left, 1 -> right
});
``