https://github.com/tjenkinson/dynamic-marquee-react

A `<Marquee />` component for React.
https://github.com/tjenkinson/dynamic-marquee-react

animation casparcg component graphics marquee react reactjs scroller

Last synced: about 1 year ago
JSON representation

A `<Marquee />` component for React.

• Host: GitHub
• URL: https://github.com/tjenkinson/dynamic-marquee-react
• Owner: tjenkinson
• License: apache-2.0
• Created: 2023-03-11T12:29:54.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-15T10:24:41.000Z (about 1 year ago)
• Last Synced: 2025-03-16T12:07:40.752Z (about 1 year ago)
• Topics: animation, casparcg, component, graphics, marquee, react, reactjs, scroller
• Language: TypeScript
• Homepage: https://dynamic-marquee-react.tjenkinson.dev
• Size: 927 KB
• Stars: 6
• Watchers: 2
• Forks: 4
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Dynamic Marquee React

A `` component for React.

Uses "[dynamic-marquee](https://github.com/tjenkinson/dynamic-marquee)" under the hood.

Features:

- You can change the rate on the fly.

- Direction can either be up/down or right/left.

- Width/height of items and container is allowed to change.

## Demo

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/tjenkinson/dynamic-marquee-react/tree/main/demo?title=Dynamic%20Marquee%20React%20Demo&file=src%2Fmain.tsx)

or [view a deployed demo](https://dynamic-marquee-react.tjenkinson.dev/).

View the code in "[demo](./demo)".

## Installation

```

npm install --save dynamic-marquee-react

```

## Usage

```jsx

import React from 'react';

import { Marquee } from 'dynamic-marquee-react';

export default function MyMarquee() {

  return (

    

      
Item 1

      
Item 2

      
Item 3

    

  );

}

```


There are also the following props:

- `rate`: pixels/s. _Default: `-25`_

- `upDown`: Switch the direction to up/down instead of left/right. If this is enabled make sure your container has a height set. _Default: `false`_

- `startOnScreen`: Start with the marquee full of items. _Default: `false`_