# react-scroll-into-view > Simple React element that when clicked scrolls to any element on page Latest version **2.3.0** (published 2026-02-20) · MIT license · 0 weekly downloads ## Install ```sh npm install react-scroll-into-view pnpm add react-scroll-into-view yarn add react-scroll-into-view bun add react-scroll-into-view ``` ## Health **Score 65/100 (B)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.3.0 | | Published | 2026-02-20 | | First published | 2018-04-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 12.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 58 | | Author | Dominik Bułaj | | Maintainers | webit | | Keywords | react, scroll, scroll-into-view | ## Links - npm: https://www.npmjs.com/package/react-scroll-into-view - Repository: https://github.com/dominikbulaj/react-scroll-into-view - Homepage: https://github.com/dominikbulaj/react-scroll-into-view#readme - Issues: https://github.com/dominikbulaj/react-scroll-into-view/issues - npm.io page: https://npm.io/package/react-scroll-into-view ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.3.0 (latest) — 2026-02-20 - 1.1.0-rc2 (1.1.0-rc2) — 2018-04-17 - 1.0.4 (1.0.4) — 2018-04-16 - 1.0.3 (1.0.3) — 2018-04-16 - 2.2.4 — 2026-02-06 - 2.2.3 — 2026-02-06 - 2.2.2 — 2026-02-06 - 2.2.1 — 2026-02-06 - 2.2.0 — 2026-02-06 - 2.1.3 — 2024-06-17 - 2.1.2 — 2024-02-02 - 2.1.1 — 2024-01-14 - 2.1.0 — 2023-12-29 - 2.0.2 — 2023-08-01 - 2.0.1 — 2023-08-01 - … 30 more at https://npm.io/package/react-scroll-into-view/versions ## README # react-scroll-into-view [![CI](https://github.com/dominikbulaj/react-scroll-into-view/actions/workflows/build.yml/badge.svg)](https://github.com/dominikbulaj/react-scroll-into-view/actions/workflows/build.yml) [![npm version](https://img.shields.io/npm/v/react-scroll-into-view)](https://www.npmjs.com/package/react-scroll-into-view) [![downloads](https://img.shields.io/npm/dw/react-scroll-into-view)](https://npmcharts.com/compare/react-scroll-into-view) A small React component that scrolls to a target element using `Element.scrollIntoView()` — in a fast, declarative way. - Declarative wrapper around [`element.scrollIntoView`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) - Works with any clickable child (button, link, custom component) - Supports smooth scrolling and native `scrollIntoView` options --- ## Demo Try the CodeSandbox example: https://codesandbox.io/s/14lxm6jmm7 --- ## Installation Pick your package manager: ```/dev/null/install.sh#L1-12 # npm npm install react-scroll-into-view # yarn yarn add react-scroll-into-view # pnpm pnpm add react-scroll-into-view # bun bun add react-scroll-into-view ``` --- ## Quick start ### 1) Import ```/dev/null/usage.tsx#L1-3 import ScrollIntoView from 'react-scroll-into-view' ``` ### 2) Use it ```/dev/null/usage.tsx#L1-15 {/* somewhere down the page */} ``` --- ## How it works `ScrollIntoView` renders a wrapper element that listens for clicks. When clicked, it finds the element matching `selector` and calls `scrollIntoView()` with the provided options. If you need more control, pass `scrollOptions` (recommended) rather than relying on legacy booleans. --- ## Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `children` | `React.ReactNode` | | Content rendered inside the component. | | `selector` | `string` | | **Required.** A valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) pointing to the target element to scroll to. | | `smooth` | `boolean` | `true` | When `true`, uses smooth scrolling (equivalent to `scrollOptions.behavior = 'smooth'`). | | `style` | `React.CSSProperties` | | Styles applied to the wrapper element. **Note:** prior to `v1.4.0`, the default was `{ display: 'inline' }`. | | `alignToTop` | `boolean` | `false` | When `true`, aligns the top of the target to the top of the visible area. When `false`, aligns to the bottom. (Maps to `scrollIntoView` “block” alignment behavior.) | | `className` | `string` | | Class name applied to the wrapper element. | | `onClick` | `(event: React.MouseEvent) => void` | | Optional click callback (called in addition to scrolling). | | `scrollOptions` | `ScrollIntoViewOptions` | `{}` | Passed to `element.scrollIntoView(options)`. See MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters. Common fields: `behavior` (`auto`/`smooth`), `block` (`start`/`center`/`end`/`nearest`), `inline` (`start`/`center`/`end`/`nearest`). Only valid properties are used. | --- ## Examples ### Scroll with explicit options (recommended) ```jsx ``` ### Disable smooth scrolling ```jsx ``` --- ## Changelog See GitHub releases: https://github.com/dominikbulaj/react-scroll-into-view/releases --- _Source: https://npm.io/package/react-scroll-into-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._