react-scroll-component
Version:
Custom react scroll component
74 lines (56 loc) • 17.5 kB
Markdown
# React scroll component
| Statements | Branches | Functions | Lines |
| --------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
|  |  |  |  |
## React version
`>= React 16.3`
## Install
```
yarn add react-scroll-component
```
```
npm install react-scroll-component
```
## Import
```
import Scroll from 'react-scroll-component';
```
```
import {Scroll} from 'react-scroll-component';
```
## Use
### Create config object
| Property | Type | Required | Usage | Default |
| ------------------------- | :------: | :-----------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -----------: |
| className | string | - | Class is added to the wrapper element | - |
| containerClass | string | - | Add class to the inner container that will wrap your content. `Be careful when adding css properties. You might break the scroller here.` | - |
| containerRef | function | - | Use it to get a reference to the scrolling container. You can set scrollTop for `vertical` or scrollLeft for `horizontal` from the parent component. Don't forget to clear this reference. | - |
| dimensionChangeTimeout | number | - | Call the handler for dimension change (height, width, maxHeight, maxWidth) with a timeout in milliseconds | - |
| direction | string | true | Choose between `vertical` or `horizontal` scroll. | - |
| display | string | - | - | inline-block |
| `height` or `width` | string | true | Set `height` for `vertical` scroll. Set `width` for `horizontal` scroll. | - |
| `maxHeight` or `maxWidth` | string | - | Set `maxHeight` for `vertical` scroll. Set `maxWidth` for `horizontal` scroll. | `none` |
| initTimeout | number | - | In `milliseconds`. Needed to ensure correct rendering of the scroller in some browsers and/or devices. | 200 |
| minScrollerSize | number | - | Set a minimum scroller `height` in pixels for `vertical` scroll or `width` in pixels for `horizontal` scroll. If a value higher than the corresponding container's size (the scrolling 'window' offsetHeight for `vertical` or offsetWidth for `horizontal`) is set the value will be limited to this container's size. | 0 |
| noInitTimeout | boolean | - | Switch to `true` to switch off the initial timeout and render the scroller right away in `componentDidMount`. | false |
| observe | boolean | - | Resize scroller on child and subtree changes using the `MutationObserver API`. | true |
| observerTimeout | number | - | Call the mutation observer callback with timeout in milliseconds. | - |
| onScrollerToggle | function | - | Callback that will be called after scroller appears or disappears. An object with a boolean property `isDisplayed` will be provided as an argument to the callback. | - |
| onTrackClick | function | - | Called when the track is clicked. An object with the following properties is provided as argument: `container` and `track` are references to the DOM elements, `direction` (-1 for `up` and 1 for `down`), and `event`. If this prop is provided it prevents the default shifting | - |
| resizeDebounce | number | - | In `milliseconds`. This is used to optimize the calls to the resize event handler. | 400 |
| scroller | object | - | This object is used as a `style` property on the scroller element. Set the `left' or`right`property for a`vertical`scroll to position the scroller to the left or to the right. Use`top`or`bottom`to position the scroller in a`horizontal`scroll case. Set`width`to define the scroller's width. Set any other valid`CSS`property to style the scroller as long as you don't override`position`,`top`or`bottom`for`vertical`and`left`or`right`for`horizontal` scroll. Add vendor prefixes if necessary. Use PascalCase for the vendor prefixed properties. | - |
| scrollerClass | string | - | Use in similar way as the `scroller` property | - |
| scrollSizeDebounce | number | - | If provided the scroller size will be calculated with timeout equal to the value (in milliseconds). Can be useful when the main dimension is dynamically changed with transition. Then this will recalculate the scroller size and display after transition is done. | - |
| track | boolean | - | States if the track should be rendered. Defaults to false | false |
| trackClass | string | if `track` is `true` | The class that will be applied to the track element | - |
| trackShift | number | if `track` is `true` and `onTrackClick` is not provided | The number of pixels that the container should scroll after clicking on the track | - |
### Wrap content and spread the `config`
```
<Scroll {...config}> content </Scroll>
```
## Browser support
- Chrome, Edge, Firefox, IE11, Safari on desktop and mobile.