Gathering detailed insights and metrics for react-scroll-into-view
Gathering detailed insights and metrics for react-scroll-into-view
Declarative way for scrolling into view (any) page element. Tiny React utility component.
Installations
npm install react-scroll-into-viewDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.9.0
NPM Version
10.7.0
Releases
20
Patch security vulnerability in 3rd party libraries
v2.1.3
Updated on Jun 17, 2024
Adjustments to to exported files
v2.1.0
Updated on Dec 29, 2023
TypeScript rewrite
v2.0.0
Updated on Aug 01, 2023
Fix: peer dependency blocked React v17
v1.12.0
Updated on Feb 21, 2022
Generating both ESM and CJS modules
v1.11.0
Updated on Jan 09, 2022
Dependencies upgrade & ESM module by default
v1.10.0
Updated on Sep 28, 2021
Languages
2
TypeScript
Shell
TypeScript (97.56%)
Shell (2.44%)
Developer
dominikbulaj
Download Statistics
Total Downloads
1,244,902
Last Day
1,055
Last Week
5,058
Last Month
24,652
Last Year
222,872
GitHub Statistics
MIT License
52 Stars
178 Commits
6 Forks
2 Watchers
2 Branches
1 Contributors
Updated on Mar 07, 2025
Maintainers
1
Package Meta Information
Latest Version
2.1.3
Package Id
react-scroll-into-view@2.1.3
Unpacked Size
12.99 kB
Size
3.88 kB
File Count
9
NPM Version
10.7.0
Node Version
20.9.0
Published on
Jun 17, 2024
Total Downloads
Cumulative downloads
Total Downloads
1,244,902
Last Day
64.1%
1,055
Compared to previous day
Last Week
1.2%
5,058
Compared to previous week
Last Month
37.8%
24,652
Compared to previous month
Last Year
12.3%
222,872
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
31
@babel/cli@babel/core@babel/preset-env@babel/preset-react@commitlint/cli@commitlint/config-conventional@commitlint/types@rollup/plugin-babel@rollup/plugin-node-resolve@rollup/plugin-typescript@skypack/package-check@testing-library/react@types/jest@types/node@types/react@types/react-dom@types/react-test-rendererbabel-jesthuskyjestjest-environment-jsdomreactreact-domreact-test-rendererrolluprollup-plugin-filesizerollup-plugin-terserts-jestts-nodetslibtypescript
React scroll-into-view
Fast & declarative way for scrolling to any element on page. Weights less than 600B (minified + gzipped)!
Idea behind
While developing landing page we needed way to scroll page to focus on registration form. It was obvious we will use element.scrollIntoView we just need find nice way how to. This is just simple React element that provides declarative way to scroll to any element on page when it's clicked.
Demo
Check out that codesandbox example
Installation
yarn add react-scroll-into-view
or if you use npm:
npm i --save react-scroll-into-view
How to use
First import it
import ScrollIntoView from 'react-scroll-into-view'
Then use it
<ScrollIntoView selector="#footer">
<button className="mdl-button mdl-js-button mdl-button--raised">
Jump to bottom
</button>
</ScrollIntoView>
<!-- somewhere down on our page we have our target element -->
<div id="footer">Scroll target element</div>
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The content of the component | |
| selector | string | Required. Valid CSS Selector to element to which we want to scroll | |
| smooth | boolean | true | Scroll behavior; when true - transition animation will be smooth. Same as setting scrollOptions.behavior = smooth |
| style | React.CSSProperties | CSS styles passed to element NOTE prior v1.4.0 default value was {display: 'inline'} | |
| alignToTop | boolean | false | Whether top of the element should be aligned to the top of the visible area. Default: aligns to bottom of element |
| className | string | Optional class name to be applied to element | |
| onClick | Function with signature:(event: React.MouseEvent<HTMLElement>) => void | Callback fired on click | |
| scrollOptions | ScrollIntoViewOptions | {} | Scroll options. See scrollIntoViewOptions on MDN docs. Only valid properties will be used.Accepts options: behavior (values: auto or smooth)block (start, center, end, or nearest)inline (start, center, end, or nearest) |
Changelog
Please check releases tab for full details
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/build.yml:14
- Warn: no topLevel permission defined: .github/workflows/build.yml:1
- Info: no jobLevel write permissions found
Reason
6 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/15 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/dominikbulaj/react-scroll-into-view/build.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/dominikbulaj/react-scroll-into-view/build.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/build.yml:23
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 16 are checked with a SAST tool
Score
4.1
/10
Last Scanned on 2025-07-07
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