apeman-react-flip
Apeman react component for image flip
Last updated a year ago by okunishinishi .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install apeman-react-flip 
SYNC missed versions from official npm registry.

apeman-react-flip

Build Status npm Version JS Standard

Apeman react component for image flip

Installation

$ npm install apeman-react-flip --save

Demo

Live demo is hosted on GitHub Pages.

Demo Image

Usage

'use strict'

import React from 'react'
import {ApFlip, ApFlipStyle} from 'apeman-react-flip'

const ExampleComponent = React.createClass({
  getInitialState () {
    return {
      focusIndex: 0
    }
  },
  render () {
    return (
      <div>
        <ApFlipStyle />
        <ApFlip images={ [
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/01.jpg',
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/02.jpg',
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/03.jpg',
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/04.jpg',
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/05.jpg',
          'https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/06.jpg'
        ] }
                focusIndex={ state.focusIndex }
                onFlip={ (amount) => s.setState({ focusIndex: s.state.focusIndex + amount })}
                onClose={ () => s.setState({ focusIndex: -1 })}
        />
        <a onClick={ () => s.setState({ focusIndex: 0 })}> Show Flip</a>
      </div>
    )
  }
})

Components

ApFlipStyle

Props

Name Type Default Description

ApFlip

Props

Name Type Default Description

License

This software is released under the MIT License.

Links

Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (7)
Dev Dependencies (27)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |