1.1.0 • Published 3 years ago

react-double-marquee v1.1.0

Weekly downloads
1,993
License
MIT
Repository
-
Last release
3 years ago

react-double-marquee

A React marquee component that smoothly loops content.

npm version npm downloads Build Status Coverage Status semantic-release

Lo-fi demo:

Example

View the demos page for live examples.

Contents

Getting Started

Demos

Demos can be found here.

Usage

Install as a dependency:

$ npm install --save react-double-marquee

Then, import it and wrap it in an element that does not display overflow:

import Marquee from 'react-double-marquee';

export default function FooComponent() {
  return (
    <div
      style={{
        width: '200px',
        whiteSpace: 'nowrap',
      }}
    >
      <Marquee>
        Some really really really really really long text
      </Marquee>
    </div>
  );
}

Props

KeyTypeDefaultDescription
speedNumber0.04Movement speed, in pixels/millisecond.
delayNumber3000Time until animation begins, in milliseconds.
direction"right"\|\|"left""right"Horizontal direction.
childMarginNumber10Horizontal margin between children, in pixels.
childrenReact nodeNoneChildren to render within the marquee.
scrollWhen"overflow"\|\|"always""always"Whether the text always scrolls, or only when the content overflows the container width.

Developing

First, clone the repository.

Installing

Install dependencies:

$ npm install

Building

To build the package bundle:

$ npm run build

To build the bundle with live rebuilding:

$ npm run watch

To run the demos with live reload:

$ npm run dev

Then, open http://localhost:8001 to view the demo docs.

To build the static docs website (e.g. for GitHub Pages):

$ npm run docs

Testing

To run tests:

$ npm run test

To run tests in watch mode:

$ npm run test:watch

To run tests with coverage reporting:

$ npm run test:coverage

Linting

To run the linter:

$ npm run lint

Releasing

Releases are done automatically via Travis CI and semantic-release from the master branch.

To verify the repos for release:

$ npm run release:verify

To run the release script as a dry-run:

$ npm run release

License

MIT

1.1.0

3 years ago

1.0.7

3 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

0.3.4

5 years ago

1.0.0

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.1.0

5 years ago