use-scroll-to-2
v1.0.5
Published
Scroll to React elements with custom timing function support
Downloads
17
Maintainers
Readme
useScrollTo
Scroll to React elements with custom timing function support.
Demo
Quick start
npm install use-scroll-to-2
Trigger manually:
import React from "react";
import { useScrollTo } from "use-scroll-to-2";
function App() {
const [ref, scroll] = useScrollTo();
return (
<div>
<button onClick={scroll}>Scroll to div</button>
<div ref={ref}>
Window will scroll to this element, when the button is clicked.
</div>
</div>
);
}
Trigger on mount:
import React from "react";
import { useScrollTo } from "use-scroll-to-2";
function App() {
const [ref] = useScrollTo({ auto: true });
return (
<div>
<div ref={ref}>
Window will scroll to this element, as soon as it mounts.
</div>
</div>
);
}
Configuration
All configuration options are optional.
duration
(optional)
Scroll duration in milliseconds. Default 480
.
delay
(optional)
Scroll delay in milliseconds. Default 0
.
easing
(optional)
An easing function. This expects a function returned by excellent bezier-easing library.
For convenience it is re-exported as bezier
in this library.
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)
.
auto
(optional)
Start scrolling on element mount. Default false
.
offsetTop
(optional)
A top offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default: 0
.
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going up, 1 -> down
});
offsetLeft
(optional)
A left offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default: 0
.
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going left, 1 -> right
});