mtc4 / react-reel

Animate any number like a slot machine. *Update* As used on Reddit! Add some flare to your metrics.

react-reel

Animate anything like a slot machine

Features

• Fully themeable
• Highly performant, runs at 60fps
• Animates anything you want!

Install

$ npm install --save react-reel

or

$ yarn add react-reel

Basic Usage

import React, { Component } from 'react'

import Reel from 'react-reel'

const Example = () => <Reel text="$34.42" />;

Props

  static propTypes = {
    /** @type {string} text */
    text: PropTypes.string.isRequired,
    /** @type {number} [1000] duration - animation duration in milliseconds */
    duration: PropTypes.number,
    /** @type {number} DELAY - delay between each sibling animation */
    delay: PropTypes.number,
    /** @type {{reel: string, group: string, number: string}} theme - react-themeable */
    theme: PropTypes.any,
  };

  static defaultProps = {
    duration: 700,
    delay: 85,
    theme: defaultTheme,
  };

Theme

This uses react-themeable

react-reel comes with no styles.

It uses react-themeable that allows you to style your component using CSS Modules, Radium, Aphrodite, JSS, Inline styles, and global CSS.

For example, to style using CSS Modules, do:

.group {
  transition-delay: 0ms;
  transition-timing-function: ease-in-out;
  transform: translate(0, 0);
}

.group .number {
  height: 1em;
}

.reel {
  height: 1em;
  display: flex;
  align-items: flex-end;
  overflow-y: hidden;

  /** CUSTOMISE BELOW */
  font-size: 45px;
  font-weight: 300;
  color: #E2AB5B;
  border-bottom: 1px solid #0492BD;
  line-height: 0.95em; /* adjusted for Lato font */
}

import theme from 'theme.css';

<Reel theme={theme} ... />

When not specified, theme defaults to:

{
  reel:   'react-reel__reel',
  group:  'react-reel__group',
  number: 'react-reel__number',
}

License

MIT © eknowles