eknowles / 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

react-reel's Issues

Adding text in the same line as the Reel isn't possible out of the box (display:block)

Great Project!

Please see problem 2 in this codepen:

The component comes out of the box as a div with display: block.
It means that if I want the numbers to be in reel but the currency to be in a different color then I have a problem.

Toggling styles is not at once

Great Project!

Please see problem 1 in this codepen:
When toggling the design of the Reel, the change is not immediate.
Is there a way to do it instantly (or faster)?

Can we add new props countSpin for number ?

number spin multiple times

Example code not working

Hey, this seems really great and I'd love to use it but it seems as though the example in the readme you have (or anything I've tried for that matter) is not working.

It looks like things just end up vertically stacked and overlapping... Here's an example I put together in code sandbox running the latest version of React. I've also tried rolling back as far as version 16.3 (which was out well before your latest commit)

https://codesandbox.io/s/72z31m88wx

Please do let me know if I am doing something wrong though and clumsily overlooking something.

Number alignment

Hey,
Numbers in the reel sometimes do not align well. Is this a known bug or should I reconsider changing its CSS? See the ss below.

CSS
const reelTheme = { group: { transitionDelay: '0ms', transitionTimingFunction: 'ease-in-out', transform: 'translate(0, 0)', height: '1em' }, reel: { height: '1em', display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start', letterSpacing: '-1px', overflowY: 'hidden', fontSize: '0.875em', lineHeight: '1em' }, number: { height: '1em' } };

Invisible digits are not hidden from screen readers

This makes webpages using react reel virtually unusable by screen reader users because they have to navigate through all 9 hidden digits for each column of text output by react-reel. For numbers that are 2 or more digits large, this means dozens of times to press the arrow key just to see what comes next on the webpage. If you look at the screenshot, you can see that the area of the digits is larger because it includes all 10 digits.

I'm going to play around with it but something as simple as putting role="presentation" on all react-reel__group divs and their descendants should be enough. That way the parent's aria-label is read and nothing else.

I tested this on an M1 Macbook Pro running Ventura 13.3.1, with Firefox 112.0.