React final marquee
Easy way to use marquee for react
Installation
npm install react-final-marquee
# or
yarn add react-final-marquee
Demo
Usage
// App.js
import ReactFinalMarquee from "react-final-marquee";
const VertialMarquee = () => {
return (
<div className="App">
<Marquee
className="marquee-customer-class"
direction="leftToRight"
speed="30"
space="20px"
repeat="5"
>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</Marquee>
</div>
);
};
const HorizontalMqrquee = () => {
return (
<div className="App">
<Marquee
className="marquee-customer-class"
direction="topToBottom"
speed="30"
space="20px"
repeat="5"
>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry.
</Marquee>
</div>
);
};
Props
Prop | Type | Default | Description |
---|---|---|---|
height |
Number / String
|
30px |
The height of the container div |
style | CSSProperties |
{} |
Inline style for the container div |
className | String |
"" |
Class name to style the container div |
paused | Boolean |
false |
The property specifies whether the animation is running or paused |
pauseOnHover | Boolean |
true |
Whether to pause the marquee when hovered |
direction |
leftToRight / rightToLeft / topToBottom / bottomToTop
|
rightToLeft |
The direction the marquee is sliding |
speed |
Number / String
|
20 |
Speed calculated as pixels/second |
space |
Number / String
|
0 |
Each loop item sapces |
repeat |
Number / String
|
2 |
Number of repeat text |
textColor |
String / null
|
null |
Text color |
bgColor |
String /null
|
null |
Container Background color |
position |
start /center / end
|
start |
Marquee position |