react-light-marquee

react-light-marquee

What goes around comes around! An ode to the HTML marquee element.

For most cases the number of elements in the dom is equal to number of children i.e it has no duplication. Duplication is only done when it is absolutely necessary.

Lightweight in bundle size and dom footprint.

Marquee fills the parent container and renders the children by default.

Marquee generates a css class for every instance with specific styles and hence it requires a id value to passed in.

Installation

npm install react-light-marquee

or

yarn install react-light-marquee

How to use

  import React from "react";
  import ListItem from "../ui/ListItem";
  import Marquee from "react-light-marquee";

  const Page = () => (
    <Marquee direction="right">
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </Marquee>
  );

  export default Page;

API

Marquee prop list

Property	Type	Default value	Details
direction	left | right | up | down	left	direction of motion
id	string	null	unique identifier for a marquee instance on a page
play	boolean	true	plays if true else it is paused
speed	number	50	Pixel per second
pauseOnHover	boolean	false	true pauses the animation on hover
initialSlideIndex	number	0	starting slide index
children	React.ReactNode[]	null	slides to be rendered

Upcoming in next releases

• More features
• Automation tests

Status

In beta