Apeman-react-album NPM

apeman-react-album

apeman react package for album components.

Installation

$ npm install apeman-react-album --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {ApAlbum, ApAlbumStyle} from 'apeman-react-album'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <ApAlbumStyle />
        <ApAlbum width={ 180 }
                 images={ [
                    "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",
                    "https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/07.jpg",
                    "https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/08.jpg",
                    "https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/09.jpg",
                    "https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/dummy/10.jpg"
                ] }/>
      </div>
    )
  }
})

Components

ApAlbumImage

Props

Name	Type	Default	Description

ApAlbumStyle

Props

Name	Type	Default
style	object	{}
highlightColor	string	ApStyle.DEFAULT_HIGHLIGHT_COLOR
backgroundColor		ApStyle.DEFAULT_BACKGROUND_COLOR

ApAlbum

Props

Name	Type	Default	Description
images	array	[]		Image source URLs
thumbnailSize	number	48		Size of thumbnail image
leftIcon	string	'fa fa-caret-left'		Icon for left pager button
rightIcon	string	'fa fa-caret-right'		Icon for right pager button
scale	string	'fill'		Image scale policy
width	number	string	'420px'		Component width
height	number	string	'360px'		Component height
id		`ap-album-${uuid.v4()}`