React 'flipper' component that is agnostic to the height of its tiles, resizing accordingly. No jQuery.
- Clone the repository
$ git clone git@github.com:VisionistInc/react-flipper.git
- Go into the cloned repository's directory
$ cd react-flipper/
- Install dependencies
$ yarn install
classMySuperDuperAwesomeAppextendsComponent{constructor(props){super(props);this.state={isFlipped: false};}flip=()=>{this.setState({isFlipped: !this.state.isFlipped});}render(){return<div><buttononClick={this.flip}>
Flip!
</button><FlipperisFlipped={this.state.isFlipped}orientation="horizontal"><Frontstyle={{minHeight: 250,background: '#19489E'}}>
/** PLACE FRONT CONTENT HERE **/
</Front><Backstyle={{background: '#9E1919',minHeight: 400}}>
/** PLACE BACK CONTENT HERE **/
</Back></Flipper></div>}}A few things to note:
- Both, front and back tiles, have no styles -- styling is completely up to you.
- minHeight is not necessary -- each tile will default to 30px; height is adjusted accordingly upon mount.
$ npm start
Use GitHub to fork this project, make and commit your changes, and then submit a new pull request.
We're just using the dist directory on the gh-pages branch to showcase our demo.
After making your changes, run:
$ npm run build
# !! commit your changes here !!
$ git subtree push --prefix dist origin gh-pagesThis updates the bundled code in the dist directory, then you commit the updated source, then push the dist directory to the root of the gh-pages branch.