react hook sticky
MIT License
Top performant lightweight solution for sticky components. Start to collaborate and share your sticky plugin.
Provide your ideas, feel free to contribute.
Would you like to contribute? Here are some nice to have ideas:
yarn add react-hook-sticky --exact
// 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>
);
};
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>
);
};
Contribute and create your own plug-in right away.
// 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);
};
// 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>
);
};
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-sticky
yarn start