Example app and usage

Try the online demo or run the included demo app locally:

$ git clone https://github.com/mxmzb/react-marquee-slider.git
$ cd react-marquee-slider && yarn
$ cd example && yarn
$ yarn start

After installing the demo locally you can visit it at http://localhost:8000

Intro

As I've repeatedly run across such marquee sliders over time, I always wanted to have one on my site, too. Unfortunately, there simply is not a single plugin like this. Neither for jQuery back in the days nor for anything modern. In fact, all the marquees I had seen where the children seemed to be randomly positioned within a space, were manually set.

This changes with react-marquee-slider. It's inspired by the beautiful use of marquee by the Zeit guys and boasts with unparalleled performance thanks to CSS animations. You can read more about the background and making of here.

Installation

$ yarn add react-marquee-slider
$ yarn add lodash styled-components # install peer dependencies

Quickstart

import Marquee, { Motion, randomIntFromInterval } from "react-marquee-slider";
import times from "lodash/times";

<div style={{ height: "500px" }}>
  <Marquee velocity={12} minScale={0.7} resetAfterTries={200} scatterRandomly>
    {times(5, Number).map((id) => (
      <Motion
        key={`child-${id}`}
        initDeg={randomIntFromInterval(0, 360)}
        direction={Math.random() > 0.5 ? "clockwise" : "counterclockwise"}
        velocity={10}
        radius={50}
      >
        <div
          style={{
            width: "50px",
            height: "50px",
            borderRadius: "50%",
            backgroundColor: "yellow",
            textAlign: "center",
            lineHeight: "50px",
          }}
        >
          {id}
        </div>
      </Motion>
    ))}
  </Marquee>
</div>;

Documentation and API

Marquee

The main slider container, where you want to put all your slider elements inside.

| Prop | Default | Type | Description | | :---------------- | :--------: | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | null | ReactNode[] | Child elements. In a usual slider, these would be the "slides" | | direction | "rtl" | String | Can be either "ltr" or "rtl" | | velocity | 30 | Number | Determines how many pixels per second the marquee moves | | scatterRandomly | false | boolean | Whether to randomly position the elements within the available space or to leave them as they are | | resetAfterTries | 100 | Number | Only when scatterRandomly is set to true. In this case elements are added one after the other. If an element collides with a sibling, the algorithm will remove it and retry again, until it finds a place where it doesn't collide with any siblings. Sometimes elements might be set so unfortunate, that they will cloak up the remaining space and make it really hard or even impossible to find free space for the current element. resetAfterTries helps by flushing all the children every x tries. I recommend to monitor computation time with onInit and onFinish callbacks and see, how this option affects it (use performance.now in those callbacks). | | onInit | () => {} | function | Do something on before the computation begins. This is a good place to create a timestamp for performance tracking. | | onFinish | () => {} | function | Do something on computation finish. This is a good place to set a loading state to false to reveal the slider, as well as for evaluating computation time (you will have to start tracking the time in the onInit callback). |

Motion

A helper component that you can wrap you child elements in. Motion will add a circular movement to your elements. Because Marquee moves horizontally with constant speed, both movements merged will look like a wave on the Motion wrapped elements.

| Prop | Default | Type | Description | | :----------------- | :----------------------------------------------------------------------------: | :---------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | null | ReactNode | The child element that you want to move in a circular motion | | initDeg | 0 | Number | At how many degree you want to start the circle movement. Randomness will add a natural look | | velocity | 10 | Number | Determines how many pixels per second your element moves along the actual circle path | | radius | 10 | Number | The radius of the circle path. Measures from the center of the Motion center to the center of your child element. That means if your element size is a 10x10 square, you should set to radius to > 10px to see an effect. You can set the radius value to less than your child element radius, too, which will not result in a circle motion any more and is not an intended usecase | | backgroundColors | { earth: "transparent", solarSystem: "transparent", buffer: "transparent", } | {} | Background colors of the different Motion parts. Play around in the demo or with this prop to see how Motion works CSS wise | | direction | clockwise | String | "clockwise" or "counterclockwise" |

Scale

A helper component that you can wrap you child elements in. Scale is an incredibly trivial component that will add just a single CSS line: transform: scale(x);.

| Prop | Default | Type | Description | | :--------- | :-----: | :---------: | :------------------------------------------------------------------------------- | | children | null | ReactNode | The child element that you want to scale | | scale | 1 | Number | Determines how to scale the component. This is the x in transform: scale(x); |

randomIntFromInterval

Just a helper function which generates a random int number in a specific range. The function has the form randomIntFromInterval(min: number, max: number) : number. It's helpful to use with the Motion component, where you can pass integers (or floats) to initDeg, velocity or radius to spice up the randomness of the child movement.

randomFloatFromInterval

Just a helper function which generates a random float number in a specific range. The function has the form randomFloatFromInterval(min: number, max: number) : number. It's helpful to use with the Scale component, where you can pass a scale prop with a float to resize the child element.

License

react-marquee-slider is licensed under the MIT.