A simple marquee component for ReactJS using requestAnimationFrame
See a demonstration here (source is in
npm install react-smooth-marquee --save
import Marquee from "react-smooth-marquee"
require (e.g. using webpack):
var Marquee = require("react-smooth-marquee")
The component is pretty simple at present (although I expect it will accumulate additional properties in later versions...):
<Marquee>Content goes here </Marquee>
There is one optional property,
velocity, which sets the movement velocity (in CSS pixels per millisecond). It defaults to 0.12, which seems a reasonably sensible value for most applications.
The component expects two CSS classes to be defined, but does not include any definitions itself (in order to allow for highest flexibility). These are:
This sets styles on the container, i.e. the outer element whose position remains static. It should usually have
(although as a
<div> element is used this is the default) and for correct function must have
This sets styles on the child that is moved within the container. In order to allow correct calculation of when the element is
moved from the left hand edge of the display back to the right, it should usually be set up either with
display: block and an
explicit width, or with
display: inline-block so that width can be calculated from its contents.