react-marquee-master

Simple component to create a scrolling marquee. The marquee HTML tag has been discontinued, but sometimes you just have to add some flare to your site! Build with typescript to provide typings out of the box.

Demo

Simple scroll:

Reverse it, and speed it up!

Or horizontal!

Maintainers

strongui Active maintainer - accepting PRs and doing minor testing, fixing issues or doing active development.

Installation

npm install react-marquee-master

or

yarn add react-marquee-master

Usage

Using NPM

1 . Require react-marquee-master after installation

import Marquee from 'react-marquee-master';

2 . Add your Marquee element

<Marquee marqueeItems={marqueeItems} />

Standalone

You can import node_modules/react-marquee-master/dist/index.js into your page. Please make sure that you have already imported react and react-dom into your page.

Options

Notes:

• The marqueeItems property just needs to be an array. You can pass strings or components.
• You must define either a height or minHeight for the marquee, because the marquee elements is absolutley positioned and will not grow the marquee container on its own.
• All other props are optional, and are there to allow you to customize the marquee to your liking.
• The component comes without any styles or style sheets. It's up to your to style the marquee any way you want. All this component will do is handle the animations for you. I did not want to force any arbitrary styles on you or grow the size of the package by importing additional libraries.

| Prop | Type | Values | Default | Description | | ------------------------- | -------------------------- | --------------------- | ------- | -------------------------------------------------------------- | | delay | number | 0-99999 | 40 | Delay of the animation. Lower number speeds up the scroll. | | direction | string | up, right, down, left | up | Direction of the scroll. | | height | number | 0-99999 | | The fixed height of the marquee | | inverseMarqueeItems | boolean | true | false | Reverse the marquee array. Useful when scrolling down. | | marqueeClassName | string | | | Class to apply to marquee element. | | marqueeContainerClassName | string | | | Class to apply to marquee container element. | | marqueeItemClassName | string | | | Class to apply to each marquee element. | | marqueeItemClassName | string | | | Class to apply to each marquee element. | | marqueeItems | Array<string|JSX.Element> | [] | [] | The text / Components to display. | | minHeight | number | 0-99999 | | More dynamic sizing option with a minimum size that will grow. |

To test locally in a separate app that imports this library

1. Open console at root of react-marquee-master
2. run npm link ../YOUR_APP_NAME/node_modules/react
3. run npm link
4. In YOUR_APP_NAME run npm link react-marquee-master
5. Now in YOUR_APP_NAME you can import this module (import Marquee, { IMarqueeProps } from 'react-marquee-master';)
6. npm start (rollup to update react-marquee-master)

To release

np

Contributing

I welcome your contribution! Fork the repo, make some changes, submit a pull-request!

License