JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 505
  • Score
    100M100P100Q101493F

The classic <marquee> in React and CSS

Package Exports

  • react-css-marquee

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-css-marquee) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React CSS Marquee

Build Status

Bringing back that sweet scrolling HTML Marquee element. In React and uses CSS @keyframes for animations. Uses hooks to detect window size so React > 16.8. Includes type definitions for TypeScript.

How to

Install

yarn add react-css-marquee

Use

import Marquee from 'react-css-marquee

...

<Marquee text="Your scrolling text here..." />

Styling

You can add your own styles by either passing them with the styles prop for inline styles, or you can use the CSS classes react-marquee__container and react-marquee__text.

Props

  • text: {string}
  • direction: {string} left | right
  • spacing: {number} how much space between text strings
  • size: {number} text size
  • styles: {object} will be applied as inline styles to the text
  • speed: {number} control speed of scrolling