Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-scroll-into-view

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-into-view

Simple React element that when clicked scrolls to any element on page

  • 2.1.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.2K
increased by9.19%
Maintainers
1
Weekly downloads
 
Created
Source

React scroll-into-view

CI npm version bundlephobia downloads

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

NameTypeDefaultDescription
childrenReact.ReactNodeThe content of the component
selectorstringRequired. Valid CSS Selector to element to which we want to scroll
smoothbooleantrueScroll behavior; when true - transition animation will be smooth. Same as setting scrollOptions.behavior = smooth
styleReact.CSSPropertiesCSS styles passed to element

NOTE prior v1.4.0 default value was {display: 'inline'}
alignToTopbooleanfalseWhether top of the element should be aligned to the top of the visible area. Default: aligns to bottom of element
classNamestringOptional class name to be applied to element
onClickFunction with signature:
(event: React.MouseEvent<HTMLElement>) => void
Callback fired on click
scrollOptionsScrollIntoViewOptions{}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

    Keywords

    FAQs

    Package last updated on 17 Jun 2024

    Did you know?

    Socket

    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.

    Install

    Related posts

    SocketSocket SOC 2 Logo

    Product

    • Package Alerts
    • Integrations
    • Docs
    • Pricing
    • FAQ
    • Roadmap
    • Changelog

    Packages

    npm

    Stay in touch

    Get open source security insights delivered straight into your inbox.


    • Terms
    • Privacy
    • Security

    Made with ⚡️ by Socket Inc