Wondering what’s next for npm?Check out our public roadmap! »

    react-double-marquee

    1.1.0 • Public • Published

    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

    Key Type Default Description
    speed Number 0.04 Movement speed, in pixels/millisecond.
    delay Number 3000 Time until animation begins, in milliseconds.
    direction "right"||"left" "right" Horizontal direction.
    childMargin Number 10 Horizontal margin between children, in pixels.
    children React node None Children 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

    Install

    npm i react-double-marquee

    DownloadsWeekly Downloads

    1,268

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    32.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar