react-reel

Animate anything like a slot machine

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-reel
60401.2.34 years ago4 years agoMinified + gzip package size for react-reel in KB

Readme

react-reel
Animate anything like a slot machine

NPM JavaScript Style Guide GitHub stars GitHub issues
Example

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'

class Example extends Component {
  render () {
    return (
      <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