react-heaven-scroll 🪽
Scroll so smooth, it's like it's made in Heaven.
Install
npm install react-heaven-scrollUsage
import * as React from 'react'
import HeavenScroll from 'react-heaven-scroll'
const Component = () => {
return (
<HeavenScroll velocity={0.06}>
...
</HeavenScroll>
)
}Ideally it should be an immediate descendant of the root element
| Argument | Type | Default | Description |
|---|---|---|---|
| velocity | number | 0.1 | A value from 0 to 1 that determines the strength of the effect |
| style | style object | null | Style object to overide the default styling of the parent element |
| disable | boolean | false | Whether or not the scroll effect will be enabled |
| rootId | string | "root" | The id of the root component to hard set the height |
| resetHeight | dependency array | null | An array of dependencies to listen for height resetting |
API
useHeaven()
Returns a react ref created by
useRef()with the current scroll value and the scroll delta.
import * as React from 'react'
import { useHeaven } from 'react-heaven-scroll'
const AnyChildComponent = () => {
const scroll = useHeaven()
React.useEffect(() => {
setInterval(() => console.log(scroll), 500)
// {delta: 0.08175386572542152, scroll: 894.9881211589087}
}, [])
return (
...
)
}