This is meant to be a tongue-in-cheek react component. I am not maintaining this currently and I do not recommend usage except for fun :p
React Scroll Jacker is a component that makes your next scroll-hijacking easy! Instead of using scroll to scroll the page like a sane person, this component lets you use scroll to transition between React elements. Users` hijacked scrolls will return after they spin their mousewheels as many times as you have arbitrarily dictated.
Now sit back and enjoy sweet tears of UX designers and users.
$ npm install --save react-scroll-jacker
- Add Elements to
<ReactScrollJacker>
as its children. - (optional) set the scroll sensitivity
- Sit back and enjoy scroll-jacking.
import ReactScrollJacker from "react-scroll-jacker";
const ScrollerJackerTest = props => {
return <ReactScrollJacker>
<ReactElement color="red"> Help! </ReactElement>
<ReactElement color="blue"> Our scroll has been hijacked! </ReactElement>
<ReactElement color="purple"> Wont somebody please think of the UX ? </ReactElement>
<ReactElement color="green"> UX?? Where we are going, we dont need UX. </ReactElement>
{/* you can add any number of ReactElements in here !! */}
</ReactScrollJacker>
};
Elements show in the order they are added in.
Decides how sensitive the scrolls are. Lower the number, more you have to scroll to transition to the next element. The default value is 7.
this sets the offset of the stickied element from the top of the viewbox.
This will inject the React.Children with props currentPage
which returns the index of the currently rendered child and progress
which returns a float between 0 and 1 representing the current progress to the next transition, 1 being 100% (Enabling this calls setState
every time you scroll, adding the icing that is bad performance to the frustration cake)
<ReactScrollJacker injectChildren height>
<ReactElementOne> Help! </ReactElementOne>
<ReactElementOne> I did not ask for this! </ReactElementOne>
</ReactScrollJacker>
// Both ReactElementOnes will have get a prop currentPage that has the index of the current rendered child.
This component is a regular div. style and className props are exposed. Style it however you wish.
This component uses stickybits to make child elements sticky. Stickybits uses css property sticky as a default and provides fallback via JS for browsers that are not supported.
- Add Tests & webpack.
- Add Demo.
- Add an option to pass down inject and not hide the children automatically.
- apologise to the UX designers and users.
- Now able to pass the progress to the next transition as a prop
progress
it returns a float between 0 and 1, 1 being 100%. - This can be used to give some kind of visual feedback of progress to users and make scroll-jacking a bit more bearable (but at the cost of performance :))