Neatly Punctuated Musings

    react-reel

    1.2.3 • Public • Published

    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(00);
    }
     
    .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

    Keywords

    none

    Install

    npm i react-reel

    DownloadsWeekly Downloads

    788

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    35.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • eknowles