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 🙏

© 2022 – Pkg Stats / Ryan Hefner

react-rotator

v0.2.1

Published

Flexible React component for composing rotators, carousels, slideshows and more.

Downloads

25

Readme

🎠 react-rotator

Flexible React component for composing rotators, carousels, slideshows and more.

Install

Via npm:

npm install --save react-rotator

Via Yarn:

yarn add react-rotator

How to use

The Rotator is built with the intention of offering a truly flexible system for building rotators, carousels, slideshows, etc. with a simplified interface for managing various ways that these components can exist.

Properties

  • component:Element | String - React component or HTMLElemnt to render as wrapper for rotator. (Default: div)
  • index:Number - Index of the currently active child. (Default: 0)
  • onChange:Function - Callback for when the index is changed internally, either via a child or indicator.

Children & Indicators

Each child within a <Rotator /> instance has properties applied that allow them to manage their own behavior based on those props. Along with callbacks that can be passed in to control the rotator’s behavior.

In addition to the [children], an optional indicator component can be passed in via props that will be rendered alongside the <Rotator />’s children, which allows for displaying indicators on progress, or building pagination controls for the <Rotator />.

Here’s a breakdown of how [children] and an indicator is managed by the component.

Children

The goal is to allow for maximum flexibility through composition. Feel free to set whatever props your components need, but the following properties will be applied/overwritten by the <Rotator /> when rendered to the page.

Properties
  • index:Number - Index of the child amongst the other children they are rendered with.
  • numChildren:Number - Number of relative children that are being rendered with this child.
  • position:Number - Position of the child in relation the the current index set on the <Rotator />.
  • If the position is 0, it could be assumed that this is the “active” child.
  • If the position is <0, the child is positioned before the current “active” child.
  • If the position is >0, the child is positioned after the current “active” child.
  • onActive:Function - Callback that could be triggered by the child when the child becomes "active". This could have different meanings depending on the child, but onActive will update the <Rotator /> to set that child at position 0.
  • onFinish:Function - Callback that could be triggered by the child, in the event that the child is managing it’s status or responsible for initiating progression within the <Rotator />.
Example
import Rotator from 'react-rotator';

...

  render() {
    return (
      <Rotator>

      </Rotator>
    );
  }

...

Indicator

An indicator component can be composed within the <Rotator /> via the indicator prop. This makes it really easy to pass in a component that will reflect the current status of the rotator, while also allowing for callbacks to be called to control the state of the rotator.

You can make your own paging indicators, or I’ve created a companion package that contains some common paging indicator components that you can use, react-paging-indicators.

Properties
  • index:Number - Index of the currently selected child.
  • onChange:Function - Callback for when the indicator changes, passing its index to set the new index state in the <Rotator />.
Example
import Rotator from 'react-rotator';
import {DotsIndicator} from 'react-paging-indicators';

...

  render() {
    return (
      <Rotator
        indicator={<DotsIndicator />}
      >

      </Rotator>
    );
  }

...

License

MIT © Ryan Hefner