React-easy-marquee NPM

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

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 marqueeAccepts 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!