Gathering detailed insights and metrics for screenfull-react
Gathering detailed insights and metrics for screenfull-react
Gathering detailed insights and metrics for screenfull-react
Gathering detailed insights and metrics for screenfull-react
npm install screenfull-react
Typescript
Module System
Node Version
NPM Version
57.6
Supply Chain
83.1
Quality
75.3
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
80,943
Last Day
2
Last Week
8
Last Month
50
Last Year
1,714
14 Stars
23 Commits
1 Forks
2 Watching
23 Branches
1 Contributors
Latest Version
0.0.4
Package Id
screenfull-react@0.0.4
Unpacked Size
1.19 MB
Size
901.56 kB
File Count
24
NPM Version
6.12.0
Node Version
12.13.0
Cumulative downloads
Total Downloads
Last day
-50%
2
Compared to previous day
Last week
-52.9%
8
Compared to previous week
Last month
-2%
50
Compared to previous month
Last year
-49.6%
1,714
Compared to previous year
1
34
A React component that implements screenfull.js.
0.2 version with hooks
Screenfull.js allows you to create full screen experiences. I implemented it because I wanted to have that behavior that removes the address bar and navbar on scroll on mobile devices, like you see on sites such as cnn.com. There is another library: react-screenfull, but it wasn't hosted on Github and looking at the source, I didn't like it, so here's the alternative.
This should work fine in SSR environments.
npm install screenfull-react
yarn add screenfull-react
There are two ways to use screenfull-react:
In other to implement it, just add <Screenfull />
to your component.
The container that is used as a reference to detect scrolling. By default this is null and refers to the document.body.
Use
Only execute full screen on a mobile device. This is currently simply checked based on window width.
The amount of pixels that is considered "mobile".
Make sure the item you are trying to scroll (by default: body
) doesn't apply a overflow: hidden
, overflow-x: hidden
or overflow-y: hidden
to it. On some browsers, this leads the scrollTop to always be 0.
Also make sure you apply the Component inside a Component that results in a HTML
(e.g. div
) tag, not a React.Fragment
.
Check out the examples directory.
screenfull-react is available under MIT. See LICENSE for more details.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
no SAST tool detected
Details
Reason
project is archived
Details
Reason
Found 0/23 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
92 existing vulnerabilities detected
Details
Score
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