Socket
Socket
Sign inDemoInstall

react-marquee-master

Package Overview
Dependencies
262
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-marquee-master

React component to allow you to create a vertically scrolling marquee


Version published
Maintainers
1
Weekly downloads
176
decreased by-53.93%

Weekly downloads

Readme

Source

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.
PropTypeValuesDefaultDescription
delaynumber0-9999940Delay of the animation. Lower number speeds up the scroll.
directionstringup, right, down, leftupDirection of the scroll.
heightnumber0-99999The fixed height of the marquee
inverseMarqueeItemsbooleantruefalseReverse the marquee array. Useful when scrolling down.
marqueeClassNamestringClass to apply to marquee element.
marqueeContainerClassNamestringClass to apply to marquee container element.
marqueeItemClassNamestringClass to apply to each marquee element.
marqueeItemClassNamestringClass to apply to each marquee element.
marqueeItemsArray<string|JSX.Element>[][]The text / Components to display.
minHeightnumber0-99999More 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

Keywords

FAQs

Last updated on 12 Feb 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc