This package has been deprecated

Author message:

move to @the-/ui-flick ( https://github.com/the-labo/the/tree/master/packages/ui-flick#readme )

the-flick

Flickable viewer of the-components

Installation

$ npm install the-flick --save

Usage

Live Demo is hosted on GitHub Page

'use strict'
 
import React from 'react'
import { TheFlick, TheFlickStyle } from 'the-flick'
import { TheButton, TheButtonStyle } from 'the-button'
import { TheSpinStyle } from 'the-spin'
import { TheImageStyle } from 'the-image'
import { TheVideoStyle } from 'the-video'
 
const imageUrls = [
  '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',
]
 
const videoUrls = [
  './mov_bbb.mp4'
]
 
class ExampleComponent extends React.PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      activeIndex: 1,
      present: true
    }
  }
 
  render () {
    return (
      <div>
        <TheButtonStyle/>
        <TheSpinStyle/>
        <TheImageStyle/>
        <TheVideoStyle/>
        <TheFlickStyle/>
 
        <TheButton onClick={() => this.setState({present: true})}>
          Show Flick Images
        </TheButton>
        <TheFlick activeIndex={this.state.activeIndex}
                  onChange={({activeIndex}) => this.setState({activeIndex})}
                  present={this.state.present}
                  onClose={() => this.setState({present: false})}
                  images={[
                    imageUrls[0],
                    {src: imageUrls[1], spinning: true},
                    {src: imageUrls[2], title: 'Some title'},
                    {src: imageUrls[3], title: 'Some title', description: 'This is image description'},
                    {src: videoUrls[0], title: 'Some video'}
                  ]}
        />
      </div>
 
    )
  }
}
 
export default ExampleComponent
 

Components

TheFlick

Flickable viewer of the-components

Props

Name	Type	Description	Default
activeIndex	number	Active index of images	0
images	arrayOf union	Images to flip	[]
onChange	func	Handle index change	() => {}
onClose	func	Close handler	() => {}
present	bool	Shows the dialog	false
spinning	bool	Show spin	false
title	string		null

TheFlickImage

TheFlickStyle

Style for TheFlick

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo