# react-scroll-parallax > React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Latest version **3.5.0** (published 2025-09-28) · MIT license · 0 weekly downloads ## Install ```sh npm install react-scroll-parallax pnpm add react-scroll-parallax yarn add react-scroll-parallax bun add react-scroll-parallax ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score. Warnings: low downloads. Negative: stale. ## Facts | | | |---|---| | Version | 3.5.0 | | Published | 2025-09-28 | | First published | 2017-06-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=10 | | Dependencies | 1 | | Unpacked size | 135.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2988 | | Author | J Scott Smith | | Maintainers | jscottsmith | | Keywords | react, scroll, effects, parallax, banner, animation, hooks, component | ## Links - npm: https://www.npmjs.com/package/react-scroll-parallax - Repository: https://github.com/jscottsmith/react-scroll-parallax - Homepage: https://react-scroll-parallax.damnthat.tv - Issues: https://github.com/jscottsmith/react-scroll-parallax/issues - npm.io page: https://npm.io/package/react-scroll-parallax ## Dependencies (1) - [parallax-controller](https://npm.io/package/parallax-controller.md) ^1.7.1 ## 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 - 3.5.0 (latest) — 2025-09-28 - 4.0.0-beta.1 (beta) — 2026-05-18 - 3.0.0-beta.3 (alpha) — 2022-01-07 - 2.0.0-beta.5 (next) — 2019-03-07 - 3.4.7 — 2025-09-27 - 3.4.5 — 2023-11-24 - 3.4.4 — 2023-11-21 - 3.4.3 — 2023-11-02 - 3.4.2 — 2023-04-07 - 3.4.1 — 2023-04-07 - 3.4.0 — 2023-04-04 - 3.3.2 — 2022-11-13 - 3.3.1 — 2022-08-09 - 3.3.0 — 2022-08-08 - 3.2.1 — 2022-08-08 - … 97 more at https://npm.io/package/react-scroll-parallax/versions ## README # React Scroll Parallax [![NPM Version Latest](https://img.shields.io/npm/v/react-scroll-parallax/latest)](https://www.npmjs.com/package/react-scroll-parallax) [![NPM Downloads](https://img.shields.io/npm/dm/react-scroll-parallax)](https://www.npmjs.com/package/react-scroll-parallax) [![Codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/v3/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax) [![Test and Lint](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/main.yml) [![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/surge.yml) [![Storybook](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml/badge.svg)](https://github.com/jscottsmith/react-scroll-parallax/actions/workflows/coverage.yml) React hooks and components to create parallax scroll effects for banners, images or any other DOM elements. Utilizes [Parallax Controller](https://parallax-controller.v1.damnthat.tv) to add vertical or horizontal scrolling based effects to elements. [Optimized](https://parallax-controller.v1.damnthat.tv/docs/performance) to _reduce_ jank on scroll and works with SSR and SSG rendered React apps. If you're coming from [V2](https://github.com/jscottsmith/react-scroll-parallax/tree/v2), here's a [migration guide](https://react-scroll-parallax.damnthat.tv/docs/migration-guides/v2-migration-guide). ## Install With npm ``` npm install react-scroll-parallax ``` or pnpm ``` pnpm add react-scroll-parallax ``` ## Example [Create effects](https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works) with a hook: ```jsx function Component() { const parallax = useParallax({ speed: -10, }); return
; } ``` or with a component: ```jsx function Component() { return (
); } ``` ## Getting Started Read the [documentation](https://react-scroll-parallax.damnthat.tv/) for setup and usage instructions. - [Usage](https://react-scroll-parallax.damnthat.tv/docs/usage/) - [Usage with NextJS 13](https://react-scroll-parallax.damnthat.tv/docs/usage/next-13) - [How it works](https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works) ### Demos - [Storybook v3](https://react-scroll-parallax-v3.surge.sh/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax/tree/v3/stories) - [Demo 1](https://react-scroll-parallax-examples.vercel.app/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax-examples) - [Demo 2](https://react-scroll-parallax.netlify.app/) - [Source Code (old 2.x version)](https://github.com/jscottsmith/react-parallax-site) ### Docs: Hooks - [`useParallax()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax) - [`useParallaxController()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax-controller) ### Docs: Components - [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-component) - [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-banner-component) - [``](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-provider) --- _Source: https://npm.io/package/react-scroll-parallax · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._