Socket
Socket
Sign inDemoInstall

react-easy-marquee

Package Overview
Dependencies
4
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-easy-marquee

A marquee component for React using CSS.


Version published
Maintainers
1
Weekly downloads
652
decreased by-38.84%

Weekly downloads

Readme

Source

react-easy-marquee

A marquee component for React using CSS.


NPM NPM NPM NPM NPM NPM


💡 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

NameDescriptionType/ValuesRequiredDefaultExample
ChildrenComponent that should animateJSX ElementtrueN/AN/A
Class NameExtra classes for the marqueestringfalseN/AN/A
DurationDuration for a loop to run in ms
NOTE: It changes with the children
numberfalse5000duration={5000}
ReverseDirection of the marqueebooleanfalsefalsereverse={false}
BackgroundBackground color of the marquee
Accepts any color format as string
stringfalse"transparent"background="#fafafa"
background="RGB(250, 250, 250)"
HeightHeight of the marqueestringfalse"5rem"height="5rem"
WidthWidth of the marqueestringfalse"100%"width="100%"
AxisThe axis along which children should move"X" or "Y"false"X"axis="X"
AlignAlignment of the children inside the marquee"start" or "end"false"center"align="end"
Pause On HoverAnimation to pause when marquee is on hoverbooleanfalsefalsepauseOnHover={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.

Keywords

FAQs

Last updated on 03 Jun 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc