npmpackage.info

Gathering detailed insights and metrics for @rooks/use-visibility-sensor

@rooks/use-visibility-sensor

Essential React custom hooks ⚓ to super charge your components!

4.11.2

3,227

MIT

TypeScript

22.99 kB

470,656 2.9

Installations

npm install @rooks/use-visibility-sensor

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

12.22.1

NPM Version

lerna/3.22.1/node@v12.22.1+x64 (linux)

Score

70.3

Supply Chain

99.5

Quality

75.9

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

6

Total

1,512

Closed

372

Merged

1,134

Issues

Open

1

Total

240

Closed

239

Releases

193

rooks@7.14.1

Published on 04 May 2023

rooks@7.14.0

Published on 29 Apr 2023

rooks@7.13.0

Published on 29 Apr 2023

rooks@7.12.0

Published on 28 Apr 2023

rooks@7.11.3

Published on 25 Apr 2023

rooks@7.11.2

Published on 18 Apr 2023

View all 193 releases

Contributors

Unable to fetch Contributors

View all 72 contributors

Languages

TypeScript

JavaScript

Shell

CSS

TypeScript (95.75%)

JavaScript (3.99%)

Shell (0.17%)

CSS (0.1%)

Developer

imbhargav5

Download Statistics

Total Downloads

470,656

Last Day

150

Last Week

995

Last Month

5,007

Last Year

77,518

GitHub Statistics

3,227 Stars

3,056 Commits

217 Forks

20 Watching

34 Branches

72 Contributors

Maintainers

Package Meta Information

Latest Version

4.11.2

Package Id

@rooks/use-visibility-sensor@4.11.2

Unpacked Size

22.99 kB

Size

6.46 kB

File Count

NPM Version

lerna/3.22.1/node@v12.22.1+x64 (linux)

Node Version

12.22.1

Total Downloads

Cumulative downloads

Total Downloads

470,656

Last day

-23.9%

150

Compared to previous day

Last week

-21.8%

995

Compared to previous week

Last month

28.2%

5,007

Compared to previous month

Last year

-17.1%

77,518

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react

Versions

@rooks/use-visibility-sensor

Note: Future updates to this package have moved to the main package rooks. All hooks now reside in a single package which you can install using

npm install rooks

yarn add rooks

Rooks is completely treeshakeable and if you use only 1 of the 50+ hooks in the package, only that hook will be bundled with your code. Your bundle will only contain the hooks that you need. Cheers!

TitleCard

About

Visibility sensor hook for React.

Installation

npm install --save @rooks/use-visibility-sensor

Importing the hook

1import useVisibilitySensor from "@rooks/use-visibility-sensor"

Usage

1
2function Demo() {
3    const rootNode = useRef(null);
4    const { isVisible, visibilityRect } = useVisibilitySensor(rootNode, {
5        intervalCheck: false,
6        scrollCheck: true,
7        resizeCheck: true
8    });
9    return (
10        <div ref={rootNode}>
11        <p>
12            {isVisible ? "Visible" : isVisible === null ? "Null" : "Not Visible"}
13        </p>
14        </div>
15    );
16}
17
18render(<Demo/>)

It checks whether an element has scrolled into view or not. A lot of the logic is taken from react-visibility-sensor and is rewritten for the hooks proposal.

Note: This is using the new React Hooks API Proposal 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

Returned Object keys

Returned object attributes	Type	Description
isVisible	Boolean	Is Ref visible or not
visibilityRect	Object	VisibilityRectangle containing coordinates of the container

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

Todo

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/ci-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-release.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/ci-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-release.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/ci-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-release.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/ci-release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci-release.yml:64: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/ci-release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/contributors.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/contributors.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/contributors.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/contributors.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/pr.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/pr.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/imbhargav5/rooks/pr.yml/main?enable=pin
Info: 0 out of 5 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 6 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.9

/10

Last Scanned on 2024-12-16

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More