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 |