react-final-marquee

React final marquee

Easy way to use marquee for react

Installation

npm install react-final-marquee
# or
yarn add react-final-marquee

Demo

See Here

Usage

// App.js
import ReactFinalMarquee from "react-final-marquee";

const VertialMarquee = () => {
  return (
    <div className="App">
      <ReactFinalMarquee
        className="marquee-customer-class"
        direction="leftToRight"
        speed="30"
        space="20px"
        repeat="5"
      >
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </ReactFinalMarquee>
    </div>
  );
};

const HorizontalMqrquee = () => {
  return (
    <div className="App">
      <ReactFinalMarquee
        className="marquee-customer-class"
        direction="topToBottom"
        speed="30"
        space="20px"
        repeat="5"
      >
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry.
      </ReactFinalMarquee>
    </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