Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ariel-rodriguez/react-hook-sticky
react hook sticky
https://github.com/ariel-rodriguez/react-hook-sticky
hooks react react-hook-sticky react-sticky-hook sticky use-sticky
Last synced: 2 months ago
JSON representation
react hook sticky
- Host: GitHub
- URL: https://github.com/ariel-rodriguez/react-hook-sticky
- Owner: Ariel-Rodriguez
- License: mit
- Created: 2019-11-21T21:45:58.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-14T10:06:20.000Z (over 3 years ago)
- Last Synced: 2024-04-23T07:17:38.439Z (9 months ago)
- Topics: hooks, react, react-hook-sticky, react-sticky-hook, sticky, use-sticky
- Language: JavaScript
- Homepage: https://codesandbox.io/s/react-hook-sticky-ts0rb
- Size: 2.39 MB
- Stars: 20
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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
[react-hook-sticky-playground](https://codesandbox.io/s/github/Ariel-Rodriguez/react-hook-sticky-playground/tree/main/?autoresize=1&fontsize=14&hidenavigation=1&theme=dark)
## 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
```bash
yarn add react-hook-sticky --exact
```
## Quickstart
#### Basic
```jsx
// 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 (
{/* 3 - Register the target to become sticky */}
I am sticky between outer height or screen height
);
};
```
#### Optional define specific boundaries
```jsx
export const StickyComponent = props => {
const { createBoundary } = useSticky(stickyConfig);
return (
Top boundary
{/* 3 - Register the target to become sticky */}
I am sticky between top and bottom boundaries or screen height
Bottom boundary
);
};
```
## 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
```jsx
// 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
```jsx
// 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 (
{/* Registering boundaries all in one collection under stickyJump context */}
);
};
```
## How to develop local
### Setup
```bash
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
```
### Run examples
```bash
yarn start
```
## Share or contribute!