import React, { Component } from 'react'

import TouchFlip from 'touchflip-react'

class Example extends Component { render () { return (
    <TouchFlip // Usage Example
        
        isFlippable={true} 
        // ^ set false to stop flipping

        showBackSide={false} 
        // ^ false: front shown. true: back shown
        // use showBackSide to manually trigger flipping

        duration={500} 
        // ^ duration of flipping animation in milli-seconds

        perspective={700} 
        // ^ 3d perspective in pixels

        timingFunction={'linear'} 
        // ^ 'ease-in' 'ease-in-out' etc.

        flipOrientation={'horizontal'} 
        // ^ can be either 'horizontal' or 'vertical'

        defaultFlipDirection={true}
        // ^ if true, rotates left to right horizontally 
        //   and down to up vertically
        // ^ if false, rotates right to left horizontally 
        //   and up to down vertically

        onBackSideShown={() => {}} 
        // ^ callback after flipping to back side

        onFrontSideShown={() => {}} 
        // ^ callback after flipping to front side

        style={{ // you can use custom styles here
            // width, height etc.
            // do not override the position attribute
        }}

        className="touchflip-main-ctr" 
        // ^ or you can use classes instead

        front={ // markup/jsx for the front side
            <div 
            style={{background: 'royalblue', width: '100%', height: '100%'}} 
            className="your-class">
                <h1>Front Side</h1>
            </div>
        }

        back={ // markup/jsx for the back side
            <div 
            style={{background: 'springgreen', width: '100%', height: '100%'}} 
            className="your-class">
                <input data-noflip type="text" /> <br />
                <input data-noflip type="range" /> <br />
                    {/* ^ use data-noflip on each element 
                        you want to prevent flipping when 
                        swiping or tapping that element */}
                <input type="button" value="Button"/> <br />
                    {/* ^ see this one does not have data-noflip, hence 
                        the flipping occurs when you swipe or tap it */}
            </div>
        }
    />
); } }