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> } /> ); } }