Skip to content

Latest commit

 

History

History
119 lines (82 loc) · 5.06 KB

README.md

File metadata and controls

119 lines (82 loc) · 5.06 KB
Raw

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.

Version js-standard-style npm download semantic-release

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

License