React hook sticky
Top performant lightweight solution for sticky components. Start to collaborate and share your sticky plugin.
Provide your ideas, feel free to contribute.
Demo
Roadmap
Would you like to contribute? Here are some nice to have ideas:
- Add plugins.
- Storybook and examples.
- Add development runtime invalidations for warning and error check.
- Create Wiki Page.
- Add unit test.
- Add E2E tests for IE and Chrome. (Probably Puppeter)
- Add E2E perfomance painting tests
- Configure CI (Probably Travis)
- Add code coverage and bundle size check.
- Add support for Horizontal scrolling / resizing
Install
yarn add react-hook-sticky --exactQuickstart
Basic
// sticky-component.js
import React from 'react';
// 1 - Import
import { useSticky, plugins } from 'react-hook-sticky';
const stickyConfig = {
// Define the context for this sticky, you may have many sticky elements.
context: 'my-sticky-1',
// 2 - Make use of builtin plugins
plugin: plugins.fillBetween, // you may combine with throttling or wrap as your needs throttle(plugins.fillBetween, 10),
// Optional - Specify the proper event listener strategy for better performance over any browser.
// default { passive: true } https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
eventListenerOptions: Modernizr.passiveeventlisteners
? { passive: true }
: false,
};
export const StickyComponent = props => {
const { createBoundary } = useSticky(stickyConfig);
return (
<div className="sticky-outer" ref={createBoundary('outer')}>
{/* 3 - Register the target to become sticky */}
<div className="sticky" ref={createBoundary('sticky')}>
I am sticky between outer height or screen height
</div>
</div>
);
};Optional define specific boundaries
export const StickyComponent = props => {
const { createBoundary } = useSticky(stickyConfig);
return (
<div className="sticky-outer">
<h1 ref={createBoundary('top')}>Top boundary</h1>
{/* 3 - Register the target to become sticky */}
<div className="sticky" ref={createBoundary('sticky')}>
I am sticky between top and bottom boundaries or screen height
</div>
<div ref={createBoundary('bottom')}>Bottom boundary</div>
</div>
);
};Development
Contribute and create your own plug-in right away.
Quick
- Fork demo https://codesandbox.io/s/react-hook-sticky-ts0rb
- Create your sticky logic
// You may reuse common code and tools
import {
useMomentum,
getClampArea,
createStyle,
setInlineStyle,
} from '../commons';
// Explode your creativity, create your new module sticky to later being integrated
export const bunnyJump = (context, event) => {
const { cacheStyles, boundaries } = context;
const stickyBoundary = boundaries.sticky;
const clampArea = getClampArea(boundaries);
if (!stickyBoundary || !clampArea.height) {
return;
}
const nextPosition = {
position: 'absolute',
maxHeight: clampArea.height,
};
const { isGoingDown } = useMomentum(event);
if (isGoingDown) {
nextPosition.top = clampArea.top;
} else {
nextPosition.bottom = clampArea.bottom;
}
setInlineStyle(stickyBoundary, createStyle(nextPosition), cacheStyles);
};- Implement in real time in your sandbox
// 1 - Import your snippet
import { bunnyJump } from './sticky-jump-draft';
import { useSticky } from 'react-hook-sticky';
const stickyConfig = {
context: 'stickyJump',
// 2 - Register it!
plugin: bunnyJump,
};
export const StickyComponent = props => {
const { createBoundary } = useSticky(stickyConfig);
return (
<section ref={createBoundary('top')}>
<div className="ad" ref={createBoundary('sticky')} />
{/* Registering boundaries all in one collection under stickyJump context */}
<div className="block" ref={createBoundary(['jumpMe'])} />
<div className="block" ref={createBoundary(['jumpMe'])} />
<div className="block" ref={createBoundary('bottom')} />
</section>
);
};How to develop local
Setup
git clone [email protected]:Ariel-Rodriguez/react-hook-sticky.git
yarn
# Link library
yarn link
# install and link library into example
# any change done in library will be hor reloaded in example page.
cd example && yarn && yarn link react-hook-stickyRun examples
yarn start