A Globally Designed Marquee Component For React

This package is being DEPRECATED on May 1, 2018* Moving forward please use the npm package grand-marquee-react conceptually similar, easier and more efficient.

A horizontal marquee component for React.js. All you do is install, require, and plug in your props and you have a full fledged marquee!


You must add these lines to your CSS or the marquee will NOT work:

@keyframes marquee {
    0%   { transform: translate(0, 0); animation-timing-function: ease-in;}
    100% { transform: translate(-100%, 0); animation-timing-function: ease-out;}

Getting Started

Install it via npm:

npm i --save marquee-react-dwyer


import React, { Component } from 'react';
import Marquee from 'marquee-react-dwyer';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
		  Index0={"Hey There"}
		  Index1={"I was"}
		  Index2={"looking for a marquee"}
		  Index3={"to use in a"}
		  Index4={"react application."}
		  Index5={"I never"}
		  Index6={"found a good one."}
		  Index7={"So I made one for us all."}
		  Index8={"Your help is welcome."}



The HTML element you want your marquee displayed as, h1, h2..., h6, p.

  • Type: string
  • Required


How many text options. Will always be one more than the biggest index supplied, due to zero being the first index. i.e If your last string is Index3, your NumberOfOptions will be 4.

  • Type: String
  • Required


Since you can have various strings appear in your marquee, you can assign them here. If you only want one string, simply provide Index0. The maximum number of different string you can provide is 11, thus Index10 will be the last input.

  • Type: String
  • Minimum 1: Index0, Maximum 11: Index10


The time in milliseconds that it takes the text to go from the right side of the screen to the left side of the screen.

  • Type: Number in Milliseconds
  • Required


The time in milliseconds that it takes for the sting being displayed in the marquee to rotate to the next string. If this time is equal to TimeToCross the marquee will display one unique string per one pass of the screen.

  • Type: Number
  • Default: 0


If true, the strings you provided for the marquee will be randomly rotated and displayed. If set to false or an empty string, the strings will appear in order of index, zero first.

  • Type: Boolean String
  • Required


The color of the text in the marquee.

  • Type: CSS Color or hexadecimal color code
  • Required