Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oberonamsterdam/react-scrollbooster
A react library that utilizes ScrollBooster in order to create drag-to-scroll components
https://github.com/oberonamsterdam/react-scrollbooster
Last synced: about 2 months ago
JSON representation
A react library that utilizes ScrollBooster in order to create drag-to-scroll components
- Host: GitHub
- URL: https://github.com/oberonamsterdam/react-scrollbooster
- Owner: oberonamsterdam
- License: mit
- Created: 2020-03-02T13:56:21.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-27T02:27:05.000Z (almost 2 years ago)
- Last Synced: 2024-11-07T05:09:11.920Z (2 months ago)
- Language: TypeScript
- Size: 3.83 MB
- Stars: 16
- Watchers: 8
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# react-scrollbooster
[](https://badge.fury.io/js/react-scrollbooster)
## Features
- 🎣 **Hooks or Component API**
- TypeScript support
## Installation
Install using [Yarn](https://yarnpkg.com):
```sh
yarn add react-scrollbooster
```
or NPM:
```sh
npm install react-scrollbooster --save
```
## Usage
### Hooks 🎣
#### `useScrollBoost`
```js
const [viewport, scrollbooster] = useScrollBoost(options)
```
Call the `useScrollBoost` hook with the (optional)
[options](#options) you need. It will return a tuple containing a `viewport` reference and the
scrollbooster `scrollbooster` (see:
[`ScrollBooster`](https://github.com/ilyashubin/scrollbooster).)
Assign the `viewport` to the DOM element that contains the content you want to make scrollable.
```jsx
import { useScrollBoost } from 'react-scrollbooster'
const Component = () => {
const [viewport, scrollbooster] = useScrollBoost({
direction: 'horizontal',
friction: 0.2,
scrollMode: 'native',
// ...optional options
});
return (
Drag to scroll
{
if(scrollbooster){
console.log(scrollbooster.getState());
}
}}>Click me!
)
}
```
### Render props
If you prefer to use the good old render props approach, that's possible too. In order to use it, you need to use the `` component and assign its reference prop (`viewport`) to the inner component.
If you need it, you can also access the
`ScrollBooster` instance.
```jsx
import { ScrollBoost } from 'react-scrollbooster'
const Component = () => (
{({ viewport, scrollbooster }) => (
Drag to scroll
{
if(scrollbooster){
console.log(scrollbooster.getState());
}
}}>Click me!
)}
)
export default Component
```
## FAQ
### How can i assign multiple ref's to a component?
You can wrap multiple `ref` assignments in a single `useCallback` which acts as a [`callback ref`]('https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node'):
```js
const setRefs = useCallback(
node => {
// Ref's from useRef needs to have the node assigned to `current`
ref.current = node
// Callback refs, like the one from `useScrollBoost`, is a function that takes the node as an argument
viewport(node)
},
[viewport],
)
```
## TODO:
- [ ] write out readme more
- [ ] add documentation with JSDoc
- [ ] add codesandbox examples (basic, react-window)
- [ ] add tests with RTL?