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-masteror
yarn add react-marquee-masterUsage
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
marqueeItemsproperty just needs to be an array. You can pass strings or components. - You must define either a
heightorminHeightfor 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!
