npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-marquee-slider-all

v0.0.5

Published

The marquee slider of your wildest dreams. Only for React.js ⛺

Downloads

9

Readme

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.