A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
Installations
npm install react-fast-marqueeDeveloper Guide
Typescript
Yes
Module System
CommonJS
Node Version
20.10.0
NPM Version
10.8.1
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (58.56%)
JavaScript (32.06%)
SCSS (9.38%)
Developer
Download Statistics
Total Downloads
15,819,312
Last Day
35,321
Last Week
183,566
Last Month
921,387
Last Year
8,460,685
GitHub Statistics
1,295 Stars
132 Commits
107 Forks
2 Watching
1 Branches
15 Contributors
Bundle Size
4.35 kB
Minified
1.74 kB
Minified + Gzipped
Package Meta Information
Latest Version
1.6.5
Package Id
react-fast-marquee@1.6.5
Unpacked Size
48.68 kB
Size
10.39 kB
File Count
9
NPM Version
10.8.1
Node Version
20.10.0
Publised On
01 Jul 2024
Total Downloads
Cumulative downloads
Total Downloads
15,819,312
Last day
-27.1%
35,321
Compared to previous day
Last week
-27.8%
183,566
Compared to previous week
Last month
-2%
921,387
Compared to previous month
Last year
89.3%
8,460,685
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
30
React Fast Marquee
React Fast Marquee is a lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
Demo
Check out the demo here and play around with some sample marquees.
Installation
If you're using npm, in the command prompt run:
1npm install react-fast-marquee --save
If you're using yarn, run:
1yarn add react-fast-marquee
Usage
To use the component, first import Marquee into your file:
1import Marquee from "react-fast-marquee";
Then wrap the <Marquee> tags around any component or text you'd like to slide.
1<Marquee> 2 I can be a React component, multiple React components, or just some text. 3</Marquee>
A sample file might look like this:
1import React from "react"; 2import MyComponent from "../components/MyComponent"; 3import Marquee from "react-fast-marquee"; 4 5const App = () => ( 6 <Marquee> 7 <MyComponent /> 8 <MyComponent /> 9 <MyComponent /> 10 </Marquee> 11); 12 13export 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 |
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 6/29 approved changesets -- score normalized to 2
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 7 are checked with a SAST tool
Reason
17 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to react-fast-marquee
svelte-fast-marquee
A Marquee component for Svelte inspired by react-fast-marquee.
big3-fast-marquee
A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.
react-fast-marquee-test
A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.
react-marquee-renderer
A blazing fast custom React renderer that supports the only tag that matters: marquee.