# react-fast-marquee > A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees. Latest version **1.6.5** (published 2024-07-01) · MIT license · 0 weekly downloads ## Install ```sh npm install react-fast-marquee pnpm add react-fast-marquee yarn add react-fast-marquee bun add react-fast-marquee ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.6.5 | | Published | 2024-07-01 | | First published | 2020-10-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 48.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1515 | | Author | justin-chu | | Keywords | react, marquee, react-component, reactjs, carousel, slider, ticker, horizontal-scrolling-carousels | ## Links - npm: https://www.npmjs.com/package/react-fast-marquee - Repository: https://github.com/justin-chu/react-fast-marquee - Homepage: https://github.com/justin-chu/react-fast-marquee#readme - Issues: https://github.com/justin-chu/react-fast-marquee/issues - npm.io page: https://npm.io/package/react-fast-marquee ## 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 - 1.6.5 (latest) — 2024-07-01 - 1.6.4 — 2024-02-08 - 1.6.3 — 2024-01-19 - 1.6.2 — 2023-10-13 - 1.6.1 — 2023-09-22 - 1.6.0 — 2023-05-22 - 1.5.2 — 2023-04-25 - 1.5.1 — 2023-04-25 - 1.5.0 — 2023-04-24 - 1.4.0 — 2023-04-23 - 1.3.5 — 2022-08-08 - 1.3.4 — 2022-08-01 - 1.3.3 — 2022-08-01 - 1.3.2 — 2022-05-14 - 1.3.1 — 2022-01-01 - … 18 more at https://npm.io/package/react-fast-marquee/versions ## README # React Fast Marquee [React Fast Marquee](https://www.react-fast-marquee.com) is a lightweight React component that harnesses the power of CSS animations to create silky smooth marquees. [![npm](https://img.shields.io/npm/v/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee) [![npm downloads](https://img.shields.io/npm/dt/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee) [![justin-chu](https://circleci.com/gh/justin-chu/react-fast-marquee.svg?style=svg)](https://circleci.com/gh/justin-chu/react-fast-marquee) [![codecov](https://codecov.io/gh/justin-chu/react-fast-marquee/branch/master/graph/badge.svg?token=52Q4YZYFME)](https://codecov.io/gh/justin-chu/react-fast-marquee) [![npm license](https://img.shields.io/npm/l/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee) [![npm bundle size](https://img.shields.io/bundlephobia/min/react-fast-marquee.svg)](https://bundlephobia.com/result?p=react-fast-marquee) [![npm type definitions](https://img.shields.io/npm/types/react-fast-marquee.svg)](https://www.npmjs.com/package/react-fast-marquee) [![demogif][2]][1] [1]: https://www.react-fast-marquee.com [2]: https://media.giphy.com/media/6ritiN2cpvpsyz4fo6/giphy.gif "demo gif" ## Demo Check out the demo [here](https://www.react-fast-marquee.com) and play around with some sample marquees. ## Installation If you're using `npm`, in the command prompt run: ```sh npm install react-fast-marquee --save ``` If you're using `yarn`, run: ```sh yarn add react-fast-marquee ``` ## Usage To use the component, first import `Marquee` into your file: ```jsx import Marquee from "react-fast-marquee"; ``` Then wrap the `` tags around any component or text you'd like to slide. ```jsx I can be a React component, multiple React components, or just some text. ``` A sample file might look like this: ```jsx import React from "react"; import MyComponent from "../components/MyComponent"; import Marquee from "react-fast-marquee"; const App = () => ( ); export default App; ``` ## Props | Property | Type | Default | Description | | :---------------- | :---------------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `style` | `CSSProperties` | `{}` | Inline style for the container div | | `className` | `string` | `""` | Name of the css class to style the container div | | `autoFill` | `boolean` | `false` | Whether to automatically fill blank space in the marquee with copies of the children or not | | `play` | `boolean` | `true` | Whether to play or pause the marquee | | `pauseOnHover` | `boolean` | `false` | Whether to pause the marquee when hovered | | `pauseOnClick` | `boolean` | `false` | Whether to pause the marquee when clicked | | `direction` | `"left" \| "right"\| "up"\| "down"` | `"left"` | The direction the marquee slides

**Warning:** Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them | | `speed` | `number` | `50` | Speed calculated as pixels/second | | `delay` | `number` | `0` | Duration to delay the animation after render, in seconds | | `loop` | `number` | `0` | The number of times the marquee should loop, 0 is equivalent to infinite | | `gradient` | `boolean` | `false` | Whether to show the gradient or not | | `gradientColor` | `string` | `white` | The color of the gradient | | `gradientWidth` | `number \| string` | `200` | The width of the gradient on either side | | `onFinish` | `{() => void}` | `null` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero. | | `onCycleComplete` | `{() => void}` | `null` | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead). | | `onMount` | `{() => void}` | `null` | A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary. | | `children` | `ReactNode` | `null` | The children rendered inside the marquee | --- _Source: https://npm.io/package/react-fast-marquee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._