Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justin-chu/react-fast-marquee
A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://github.com/justin-chu/react-fast-marquee
carousel marquee react react-component reactjs slider ticker
Last synced: 27 days ago
JSON representation
A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
- Host: GitHub
- URL: https://github.com/justin-chu/react-fast-marquee
- Owner: justin-chu
- License: mit
- Created: 2020-10-15T15:17:10.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-01T19:27:22.000Z (4 months ago)
- Last Synced: 2024-10-09T08:34:52.582Z (about 1 month ago)
- Topics: carousel, marquee, react, react-component, reactjs, slider, ticker
- Language: TypeScript
- Homepage: https://react-fast-marquee.com
- Size: 2.33 MB
- Stars: 1,189
- Watchers: 2
- Forks: 97
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Fast Marquee
[React Fast Marquee](https://www.react-fast-marquee.com) is a lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
[](https://www.npmjs.com/package/react-fast-marquee)
[](https://www.npmjs.com/package/react-fast-marquee)
[](https://circleci.com/gh/justin-chu/react-fast-marquee)
[](https://codecov.io/gh/justin-chu/react-fast-marquee)
[](https://www.npmjs.com/package/react-fast-marquee)
[](https://bundlephobia.com/result?p=react-fast-marquee)
[](https://www.npmjs.com/package/react-fast-marquee)
[![demogif][2]][1]
[1]: https://www.react-fast-marquee.com
[2]: https://media.giphy.com/media/6ritiN2cpvpsyz4fo6/giphy.gif "demo gif"
## Demo
Check out the demo [here](https://www.react-fast-marquee.com) and play around with some sample marquees.
## Installation
If you're using `npm`, in the command prompt run:
```sh
npm install react-fast-marquee --save
```
If you're using `yarn`, run:
```sh
yarn add react-fast-marquee
```
## Usage
To use the component, first import `Marquee` into your file:
```jsx
import Marquee from "react-fast-marquee";
```
Then wrap the `` tags around any component or text you'd like to slide.
```jsx
I can be a React component, multiple React components, or just some text.
```
A sample file might look like this:
```jsx
import React from "react";
import MyComponent from "../components/MyComponent";
import Marquee from "react-fast-marquee";
const App = () => (
);
export default App;
```
## Props
| Property | Type | Default | Description |
| :---------------- | :---------------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `style` | `CSSProperties` | `{}` | Inline style for the container div |
| `className` | `string` | `""` | Name of the css class to style the container div |
| `autoFill` | `boolean` | `false` | Whether to automatically fill blank space in the marquee with copies of the children or not |
| `play` | `boolean` | `true` | Whether to play or pause the marquee |
| `pauseOnHover` | `boolean` | `false` | Whether to pause the marquee when hovered |
| `pauseOnClick` | `boolean` | `false` | Whether to pause the marquee when clicked |
| `direction` | `"left" \| "right"\| "up"\| "down"` | `"left"` | The direction the marquee slides
**Warning:** Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them |
| `speed` | `number` | `50` | Speed calculated as pixels/second |
| `delay` | `number` | `0` | Duration to delay the animation after render, in seconds |
| `loop` | `number` | `0` | The number of times the marquee should loop, 0 is equivalent to infinite |
| `gradient` | `boolean` | `false` | Whether to show the gradient or not |
| `gradientColor` | `string` | `white` | The color of the gradient |
| `gradientWidth` | `number \| string` | `200` | The width of the gradient on either side |
| `onFinish` | `{() => void}` | `null` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero. |
| `onCycleComplete` | `{() => void}` | `null` | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead). |
| `onMount` | `{() => void}` | `null` | A callback function that is invoked once the marquee has finished mounting. It can be utilized to recalculate the page size, if necessary. |
| `children` | `ReactNode` | `null` | The children rendered inside the marquee |