React high order component (HOC) to respond to scroll direction changes
npm install @serafinomb/react-scroll-directionnpm install @serafinomb/react-scroll-directionjavascript
withScrollDirection(Component[, offsetThreshold = 0])
`* Component Your React component;
* offsetThreshold Integer value. While the scroll amount (pixels from the top
of the document) is below or equal to
, scrollDirection is
going to be null.$3
`javascript
import withScrollDirection, {
SCROLL_DIRECTION_DOWN,
} from '@serafinomb/react-scroll-direction';const HEADER_HEIGHT_PX = 200;
// 4. Set the height to be equal to the offsetThreshold and use the
// scrollDirection value to hide/show our Header.
function headerStyle(scrollDirection) {
return {
height: HEADER_HEIGHT_PX,
transform: scrollDirection === SCROLL_DIRECTION_DOWN ? 'translateY(-100%)' : null,
};
}
// 3. With scrollDirection generate the Header styles
const Header = ({ scrollDirection, ...props }) => (
My website header
);// 2. Pass down the scrollDirection property to our Header component
const App = props => (
...
)
// 1. Pass the component to the withScrollDirection HOC and specify an
// offsetThreshold
export default withScrollDirection(App, HEADER_HEIGHT_PX);
`###
can assume the following values:
* null when the scroll amount is less than or equal to offsetThreshold.
* SCROLL_DIRECTION_DOWN when scrolling down (and the scroll amount is greater
than offsetThreshold);
* SCROLL_DIRECTION_UP when scrolling up (and the scroll amount is greater than
offsetThreshold);$3
A demo can be found at /example.To run it locally, clone the repository and run the following commands:
*
npm pack
*
*
* or with docker:
*
*
*
* $3
As of right now I've not found a convenient way to quickly test changes to the