Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imbhargav5/rehooks-visibility-sensor
Checks whether a Ref has scrolled into view or not.
https://github.com/imbhargav5/rehooks-visibility-sensor
hooks react rehooks visibility-detection
Last synced: 3 months ago
JSON representation
Checks whether a Ref has scrolled into view or not.
- Host: GitHub
- URL: https://github.com/imbhargav5/rehooks-visibility-sensor
- Owner: imbhargav5
- License: mit
- Created: 2018-10-26T10:09:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-29T15:59:36.000Z (about 6 years ago)
- Last Synced: 2024-10-12T00:41:05.398Z (3 months ago)
- Topics: hooks, react, rehooks, visibility-detection
- Language: JavaScript
- Homepage:
- Size: 214 KB
- Stars: 13
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `rehooks-visibility-sensor`
- awesome-react-hooks-cn - `rehooks-visibility-sensor`
- awesome-react-hooks - `rehooks-visibility-sensor`
- awesome-react-hooks - `rehooks-visibility-sensor`
README
# `@rehooks/visibility-sensor` *DEPRECATED. Moved to [@rooks/use-visibility-sensor](https://github.com/imbhargav5/rooks/tree/master/packages/visibility-sensor)*
> React hook for visibility sensing a ref
It checks whether an element has scrolled into view or not. A lot of the logic is taken from [react-visibility-sensor](https://github.com/joshwnj/react-visibility-sensor) and is rewritten for the hooks proposal.
> **Note:** This is using the new [React Hooks API Proposal](https://reactjs.org/docs/hooks-intro.html)
> which is subject to change until React 16.7 final.
>
> You'll need to install `react`, `react-dom`, etc at `^16.7.0-alpha.0`
## Demo
[](https://gyazo.com/98634bb2a962733670d798d1e754d63e)
## Install
```sh
yarn add @rehooks/visibility-sensor
```
## Usage
```js
import useVisibilitySensor from "@rehooks/visibility-sensor";
function MyComponent() {
const rootNode = useRef(null);
const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, {
intervalCheck: false,
scrollCheck: true,
resizeCheck: true
});
return (
{isVisible ? "Visible" : isVisible === null ? "Null" : "Not Visible"}
);
}
```
## Options
The first argument of the `useVisibilitySensor` hook is a ref, the second argument is an options object. The available options are as follow:
`intervalCheck: false` - Accepts `int | bool`, if an `int` is supplied, that will be the interval in `ms` and it keeps checking for visibility
`partialVisibility: false` - Accepts `bool | string` : Tells the hook if partial visibility should be considered as visibility or not. Accepts `false` and directions `top`, `bottom`, `left` and `right`
`containment: null` - A `DOMNode` element which defaults to `window`. The element relative to which visibility is checked against
`scrollCheck: true` - A `bool` to determine whether to check for scroll behavior or not
`scrollDebounce: 250` - The debounce ms for scroll
`scrollThrottle: -1` - The throttle ms for scroll. If throttle > -1, debounce is ignored.
`resizeCheck: false` - A `bool` to determine whether to check for resize behavior or not
`resizeDebounce: 250` - The debounce ms for resize
`resizeThrottle: -1` - The throttle ms for resize. If throttle > -1, debounce is ignored.
`shouldCheckOnMount: true` - A `bool` which determines whether an initial check on first render should happen or not.
`minTopValue: 0` - An `int` top value to determine what amount of top visibility should be considered for `visibility`
## Status: Yet to be published to npm
## Todo
- [x] Init
- [x] Scroll and Resize support
- [x] Debounce and throttling
- [x] Option to opt-out of initial check on mount
- [x] Documentation of all options
- [x] Tests _ WIP _
- [ ] More examples _ WIP _