Simple custom hook for ScrollTo functionality using react-spring v9+.
npm install react-spring-scroll-to-hook> Simple custom hook for ScrollTo functionality using react-spring v9+.
 
``bash`
npm install react-spring-scroll-to-hook
`bash`
yarn add react-spring-scroll-to-hook
useScrollTo hook accepts 1 argument a that is react-spring config: https://react-spring.io/common/configs
scrollTo function returned from useScrollTo hook accepts 2 arguments:
1: Element | string | number (number of pixels from top of the window)
2: Number (offset in pixels from element you want to scroll to)
I don't know how three shaking works but I would recommend using @react-spring/web (used in this hook) instead of react-spring
`tsx
import {config} from '@react-spring/web'
import useScrollTo from 'react-spring-scroll-to-hook'
//Scroll to element
const BasicExampleWthConfig = () => {
const {scrollTo} = useScrollTo(config.molasses)
return (
)
}
//Scroll to top
const ScrollToTop = () => {
const {scrollTo} = useScrollTo({ mass: 1, tension: 180, friction: 12 })
return (
)
}
//Scroll to top with offset and first argument as string only (document.querySelector is used in the hook)
const ScrollToTopWithOffset = () => {
const {scrollTo} = useScrollTo()
return (
)
}
``
MIT © TomasSestak