Installations

npm install react-scroll-into-view

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.9.0

NPM Version

10.7.0 Score

57.1

Supply Chain

76.3

Quality

79.3

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

1

Total

35

Closed

11

Merged

23

Issues

Open

0

Total

15

Closed

15

Releases

20

Patch security vulnerability in 3rd party libraries

v2.1.3

Published on 17 Jun 2024

Adjustments to to exported files

v2.1.0

Published on 29 Dec 2023

TypeScript rewrite

v2.0.0

Published on 01 Aug 2023

Fix: peer dependency blocked React v17

v1.12.0

Published on 21 Feb 2022

Generating both ESM and CJS modules

v1.11.0

Published on 09 Jan 2022

Dependencies upgrade & ESM module by default

v1.10.0

Published on 28 Sept 2021

View all 20 releases

Contributors

1

Unable to fetch Contributors

View all 1 contributors

Languages

2

TypeScript

Shell

TypeScript (97.56%)

Shell (2.44%)

Developer

dominikbulaj

Download Statistics

Total Downloads

1,116,955

Last Day

581

Last Week

4,145

Last Month

16,482

Last Year

219,677

GitHub Statistics

52 Stars

178 Commits

6 Forks

3 Watching

2 Branches

1 Contributors

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

Publised On

17 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

1,116,955

Last day

-9.4%

581

Compared to previous day

Last week

6.4%

4,145

Compared to previous week

Last month

-27.6%

16,482

Compared to previous month

Last year

39.9%

219,677

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

2

react react-dom

Dev Dependencies

31

Versions

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.

10

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

License

Determines if the project has defined a license.

9

Token-Permissions

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

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Maintained

Determines if the project is "actively maintained".

0

Pinned-Dependencies

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

0

Code-Review

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

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

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

4.6

/10

Last Scanned on 2024-12-09

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