Dynamic Marquee React

A <Marquee /> component for React.

Uses "dynamic-marquee" under the hood.

Features:

• You can change the rate on the fly.
• Direction can either be up/down or right/left.
• Width/height of items and container is allowed to change.

Demo

or view a deployed demo.

View the code in "demo".

Installation

npm install --save dynamic-marquee-react

Usage

import React from 'react';
import { Marquee } from 'dynamic-marquee-react';

export default function MyMarquee() {
  return (
    <Marquee>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Marquee>
  );
}

There are also the following props:

• rate: pixels/s. Default: -25
• upDown: Switch the direction to up/down instead of left/right. If this is enabled make sure your container has a height set. Default: false
• startOnScreen: Start with the marquee full of items. Default: false