react-marquee-master

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

• Open console at root of react-marquee-master
• run npm link ../YOUR_APP_NAME/node_modules/react
• run npm link
• In YOUR_APP_NAME run npm link react-marquee-master
• Now in YOUR_APP_NAME you can import this module (import Marquee, { IMarqueeProps } from 'react-marquee-master';)
• 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