https://github.com/ruberoni/react-auto-expand-marquee
Marquee that expands to its container width size automatically
https://github.com/ruberoni/react-auto-expand-marquee
animation expand marquee react storybook
Last synced: about 1 month ago
JSON representation
Marquee that expands to its container width size automatically
- Host: GitHub
- URL: https://github.com/ruberoni/react-auto-expand-marquee
- Owner: Ruberoni
- Created: 2022-02-14T16:56:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-25T14:41:25.000Z (about 4 years ago)
- Last Synced: 2025-09-14T08:20:20.187Z (9 months ago)
- Topics: animation, expand, marquee, react, storybook
- Language: TypeScript
- Homepage:
- Size: 849 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Auto Expand Marquee
Marquee that expands to its container width size automatically
# Goals 🚩
This project has the initial goal to work as a component for my webpage, but while I was working on it I changed the design a lot and I did't used it, so now it was very good way to learn about CSS Animations, Storybook and creating my own React modules.
# Installation
```
npm install react-auto-expand-marquee
```
# Usage
## Import
```javascript
import AutoExpandMarquee from 'react-auto-expand-marquee'
```
## Simple example
```javascript
Marquee
```
## Complete example
```javascript
import React from "react"
import AutoExpandMarquee from 'react-auto-expand-marquee'
const animationConfig = {
mix: true,
speed: 0.03,
timingFunction: 'ease-in'
}
const Example = () => (
Header
Paragraph
)
export default Example
```
# Props
| **Property** | **Type** | **Default** | **Description** |
|-------------------|-------------------------|------------------------------|-------------------------|
| `animationConfig` | IMarqueeAnimationConfig | `mix: false`
`play: true` | Customize the animation |
| `style` | `React.CSSProperties` | | |
## IMarqueeAnimationConfig
| **Property** | **Type** | **Default** | **Description** |
|------------------|--------------------------------------------------|-------------|-----------------------------------------------------------|
| `mix` | Boolean | `false` | When set to `true` each row will move to a different side |
| `play` | Boolean | `true` | Controls if the animation is running or not |
| `reverse` | Boolean | `false` | Controls if the animation will go from right to left |
| `speed` | Number | `~ 0.1823` | Controls the animation speed |
| `delay` | Number | 0 | |
| `timingFunction` | `React.CSSProperties['animationTimingFunction']` | `linear` | |
| `iterationCount` | `React.CSSProperties['animationIterationCount']` | `infinite` |
| `direction` | `React.CSSProperties['animationDirection']` | `normal` | |
# See also
- [React Fast Marquee](https://github.com/justin-chu/react-fast-marquee) by [Justin Chu](https://github.com/justin-chu)
# Contact me! 📞
Email me: [ruben.pardes25@gmail.com](mailto:ruben.pardes25@gmail.com)\
Discord: Ruberoni#8428