a simple wrapper to create a smooth scrolling div for your react application. it uses gesture handlers and react-spring physics to animate the element
$ npm install react-spring @use-gesture/react sukuroruHello World:
import { ScrollWrapper } from 'sukuroru'
const MyComponent = () => {
return (
<ScrollWrapper>
<div style={{heigth: '100vh', background: 'red', width: '100vw'}}></div>
<div style={{heigth: '100vh', background: 'blue', width: '100vw'}}></div>
</ScrollWrapper>
)
}try it yourself here!..
keep in mind that in order for a component to become scrollable, the content inside the wrapper must be bigger(overflowing).
- Vertical & horizontal scrolling.
- Typescript support.
ScrollWrapper accept any props that a normal div element can accept plus some additional including:
<ScrollWrapper
scrollSpeed={1} // any number.
horizontal={false} // toggle horizontal scrolling
active={true} // deactivate this if you dont want the element to scroll
springConfig={{ // a spring config value.
tension: 280;
friction: 120;
}}
innerProps
></ScrollWrapper>ScrollWrapper have an inner an outer div. if you want to change any of the inner div props, use innerProps.
innerProps={{
className: 'inner',
onClick:{handleClick}
style:{MyStyle}
}}useScrollContext is a hook that contains the scrollWrapper states and properties. this is only accesible inside the ScrollWrapper component.
import { useScrollContext } from 'sukuroru'
const MyButtons = () => {
const {
offset, // {x, y} position of current offset as SpringValue.
scrollTo, // use this to manually change the scroll position.
spring // the wrapper spring api.
} = useScrollContext()
return (
<>
<button onClick={() => scrollTo(3)}> scroll to the fourth element inside scrollWrapper </button>
<button onClick={() => scrollTo('500px')}> scroll to 500px</button>
</>
)
}
const App = () => {
return (
<ScrollWrapper>
<MyButtons />
</ScrollWrapper>
)
}want more control for the animation? check out react-spring docs!
if you have questions or having a problem feel free to open issues. also PR is open