npmpackage.info

react-scroll-into-view

Declarative way for scrolling into view (any) page element. Tiny React utility component.

2.1.3

MIT

TypeScript

575.00 B

1,121,067 4.6

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

56.8

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

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

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

Shell

TypeScript (97.56%)

Shell (2.44%)

Developer

dominikbulaj

Download Statistics

Total Downloads

1,121,067

Last Day

106

Last Week

3,913

Last Month

15,889

Last Year

219,559

GitHub Statistics

52 Stars

178 Commits

6 Forks

3 Watching

2 Branches

1 Contributors

Bundle Size

979.00 B

Minified

575.00 B

Minified + Gzipped

Bundlephobia

Maintainers

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

NPM Version

10.7.0

Node Version

20.9.0

Publised On

17 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

1,121,067

Last day

106

Compared to previous day

Last week

-3.2%

3,913

Compared to previous week

Last month

-27.8%

15,889

Compared to previous month

Last year

39.6%

219,559

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

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.

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

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

Score

4.6

/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.

react-scroll-into-view

Installations

Developer Guide

Yes

ESM

20.9.0

10.7.0

Score

Pull Requests

1

35

11

23

Issues

0

15

15

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

dominikbulaj

Download Statistics

GitHub Statistics

Bundle Size

979.00 B

575.00 B

Maintainers

Package Meta Information

Total Downloads

1,121,067

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React scroll-into-view

Idea behind

Demo

Installation

How to use

Props

Changelog

10

10

10

9

6

3

0

0

0

0

0

0

4.6

/10

Other packages similar to react-scroll-into-view