jagnani73 / react-easy-marquee

A highly customisable `marquee` package for React built using CSS. Renders anything given between the tags, be it an image, text or a custom JSX element!

react-easy-marquee

A marquee component for React using CSS.

💡 Project Description

A highly customisable marquee component for React built using CSS. Renders anything given between the tags, be it an image, text or a custom JSX element!

🔧 Installation

npm install react-easy-marquee

or

yarn add react-easy-marquee

📦 Example

A demo is worth a thousand words!

import Marquee from "react-easy-marquee";

const Example = () => {
  const images = ["https://picsum.photos/200", "https://picsum.photos/100"];

  return (
    <div>
      <Marquee duration={10000} background="#fafafa" height="250px">
        <h1>I go weee!</h1>

        {images.map((image) => (
          <img src={image} alt="picsum" />
        ))}
      </Marquee>
    </div>
  );
};

export default Example;

🖇️ Props

Name	Description	Type/Values	Required	Default	Example
Children	Component that should animate	JSX Element	true	N/A	N/A
Class Name	Extra classes for the marquee	string	false	N/A	N/A
Duration	Duration for a loop to run in ms NOTE: It changes with the children	number	false	5000	duration={5000}
Reverse	Direction of the marquee	boolean	false	false	reverse={false}
Background	Background color of the marquee Accepts any color format as string	string	false	"transparent"	background="#fafafa" background="RGB(250, 250, 250)"
Height	Height of the marquee	string	false	"5rem"	height="5rem"
Width	Width of the marquee	string	false	"100%"	width="100%"
Axis	The axis along which children should move	"X" or "Y"	false	"X"	axis="X"
Align	Alignment of the children inside the marquee	"start" or "end"	false	"center"	align="end"
Pause On Hover	Animation to pause when marquee is on hover	boolean	false	false	pauseOnHover={false}

🚨 Forking this repo

Many people have contacted us asking if they can use this code for their own websites. The answer to that question is usually "yes", with attribution. There are some cases, such as using this code for a business or something that is greater than a personal project, that we may be less comfortable saying yes to. If in doubt, please don't hesitate to ask us.

We value keeping this site open source, but as you all know, plagiarism is bad. We spent a non-negligible amount of effort developing, designing, and trying to perfect this iteration of our website, and we are proud of it! All we ask is to not claim this effort as your own.

So, feel free to fork this repo. If you do, please just give us proper credit by linking back to this repo, https://github.com/jagnani73/react-easy-marquee. Refer to this handy quora post if you're not sure what to do. Thanks!

📜 License

react-easy-marquee is available under the MIT license. See the LICENSE file for more info.

🤝 Contributing

Please read Contributing.md for details on our code of conduct, and the process for submitting pull requests to us.

💥 Mention

A special thanks to Styled Components for the inspiration, and SneakySensei to introducing me to it.

react-easy-marquee's Issues

Contents shrinking when width of content crossing 100% of parent

Describe the bug
The width of the content is misbehaving if more than 100% of the parent.

To Reproduce
Steps to reproduce the behavior:

1. Add elements that cross the 100% width of the parent
2. See for yourself

Expected behaviour
It to not matter

Additional context
Add any other context about the problem here.

Add Running or paused state

Is your feature request related to a problem? Please describe.
There should be a toggle for the state to run or stay on pause; would help if phone view needs it to run and laptop doesn't

Describe the solution you'd like
introducing another prop

Hover Effect not working properly

Describe the bug
Any mouse event on the children does not propagate

To Reproduce
Steps to reproduce the behavior:

1. Add an image as a child on the marquee
2. Add a CSS hover property to the image that filters grayscale 100%
3. Hover over the image

Expected behavior
Image to turn black and white

Multiple Marquees marquee in same direction

Describe the bug
I created a row with 4 cols. The first and third col should marquee up, the second and fourth should marquee down, but they marquee all in the same direction.

Example Code:
`<Row className='' xs={4} style={{ minHeight: 'calc(100vh + 7px)', backgroundColor: 'purple' }}>
<div style={{ width: '25vw' }} className='pd-0'>

        {VIEWITEMS.imgs.map((image) => (
          <img src={image} alt="" style={{ width: '25vw', height: '25vw' }} />
        ))}
      </Marquee>
    </div>
    <div style={{ width: '25vw' }} className='pd-0'>
      <Marquee duration={100000} axis='Y' height='110vh' align='center' reverse={false}>

        {VIEWITEMS.imgs.map((image) => (
          <img src={image} alt="" style={{ width: '25vw', height: '25vw' }} />
        ))}
      </Marquee>
    </div>
    <div style={{ width: '25vw' }} className='pd-0'>
      <Marquee duration={100000} axis='Y' height='110vh' align='center' reverse={true}>

        {VIEWITEMS.imgs.map((image) => (
          <img src={image} alt="" style={{ width: '25vw', height: '25vw' }} />
        ))}
      </Marquee>
    </div>
    <div style={{ width: '25vw' }} className='pd-0'>
      <Marquee duration={100000} axis='Y' height='110vh' align='center' reverse={false}>

        {VIEWITEMS.imgs.map((image) => (
          <img src={image} alt="" style={{ width: '25vw', height: '25vw' }} />
        ))}
      </Marquee>
    </div>
  </Row>`

Package
i like your package so much. it's so easy to use - really nice job!

Style re-rendering error

Style re-rendering error
PFA

Code

 <div className="sidebararea">
                <Marquee duration={10000} background="#fafafa" height='100%' axis='Y' reverse>
                    {images.map((image) => (
                        <img src={image} alt="picsum" />
                    ))}
                </Marquee>
            </div>

Error Spamming in Console

Describe the bug
A clear and concise description of what the bug is.
Something in the CSS is causing a error

To Reproduce
Steps to reproduce the behavior:
Use the module????

Expected behavior
A clear and concise description of what you expected to happen.
No error in console

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 96.0.4664.45

Cannot create multiple instances

Describe the bug
Unable to create multiple instances for the marquee.

To Reproduce
Steps to reproduce the behavior:

1. Use the marquee at one place
2. Use it in another

Expected behavior
Different marquee created based on props

Rendering warnings

Describe the bug
Warnings when initially rendering the component. Not technically a bug but ideally avoided.

To Reproduce
Steps to reproduce the behavior:

1. Render marquee

Expected behavior
No warnings

Screenshots

Additional context
Add any other context about the problem here.

Text not wrapping

Describe the bug
white-space: nowrap on inner doesn't allow marquee item text to wrap and makes the extend beyond parent container.

To Reproduce
Steps to reproduce the behavior:

1. Have text wider than marquee container
2. Observe wrapping issues

Expected behavior
The text should wrap and stay inside the parent container

Screenshots

Aditional information
This is for a vertical marquee

marquee reverse doesn't work on Safari

Describe the bug
When

To Reproduce

1. Open the Safari browser
2. Go to the demo site https://jagnani73.github.io/react-easy-marquee/ and open the reverse option.

Expected behavior
On Safari browser

1. When the reverse option is false the direction is left to right.
2. When the reverse option is true the direction is right to left.

Screenshots
https://user-images.githubusercontent.com/8435927/162687004-6a24e8c7-3d82-486f-adad-58eaa208472d.mov

Desktop (please complete the following information):

• OS: macOS Monterey
• Browser Safari
• Version 15.2（17612.3.6.1.6）

Smartphone (please complete the following information):

• Device: iPhone
• OS: ios 15.4.1
• Browser Safari
• Version Same as ios version

Bug: Demo link is broken

Describe the bug
The demo link (https://github.com/jagnani73/github.io/reacy-easy-marqueee) in the Readme returns a 404.

To Reproduce
Steps to reproduce the behavior:
1.Click on 'Demo' in the readme
2. 404 Page is encountered

Expected behavior
A working demo should be appearing.

Screenshots