apeman-react-reversible

apeman component with reversible effect.

Installation

$ npm install apeman-react-reversible --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react';
import {ApReversible, ApReversibleStyle} from 'apeman-react-reversible';

const ExampleComponent = React.createClass({
  render () {
    const reversibleStyle = {
      position: `relative`,
      borderRadius: `28px`,
      overflow: `hidden`,
      margin: `0 8px`,
      border: `1px solid`
    }
    return (
      <div>
        <ApReversibleStyle />
        <div style={{fontSize:48}}>
          {
            [ 0, 0.25, 0.5, 0.75, 1 ].map((rate, i) => (
              <ApReversible rate={rate}
                            inline={true}
                            key={`reversible-${i}`}
                            backgroundColor="#FFF"
                            style={reversibleStyle}
                            color={'#F83'}
              >
                <span className="demo-badge">{parseInt(rate * 100)}<span>%</span></span>
              </ApReversible>
            ))
          }
          <br/>
        </div>
      </div>
    )
  }
})

Components

ApReversibleStyle

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | style | object | {} | | |

ApReversible

Props

| Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | rate | number | 0 | | | | inline | bool | false | | | | backgroundColor | string | '#FFF' | | | | color | string | '#38E' | | | | direction | enum | 'VERTICAL' | | |

License

This software is released under the MIT License.

Links

• apeman
• apeman-react-labo
• React