Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-scroll-into-view
Advanced tools
Simple React element that when clicked scrolls to any element on page
Fast & declarative way for scrolling to any element on page. Weights less than 600B (minified + gzipped)!
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.
Check out that codesandbox example
yarn add react-scroll-into-view
or if you use npm:
npm i --save react-scroll-into-view
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>
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 ) |
Please check releases tab for full details
FAQs
Simple React element that when clicked scrolls to any element on page
The npm package react-scroll-into-view receives a total of 3,564 weekly downloads. As such, react-scroll-into-view popularity was classified as popular.
We found that react-scroll-into-view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.