react-flipper
React 'flipper' component that is agnostic to the height of its tiles, resizing accordingly. No jQuery.
Get Started
- 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
Usage
{ super props; thisstate = isFlipped: false ; } { this; } { return <div> <button onClick=thisflip> Flip! </button> <Flipper isFlipped=thisstateisFlipped orientation="horizontal"> <Front style= minHeight: 250 background: '#19489E' > /** PLACE FRONT CONTENT HERE **/ </Front> <Back style= 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.
Running for development
$ npm start
Contributing
Use GitHub to fork this project, make and commit your changes, and then submit a new pull request.
gh-pages
Updating 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-pages
This 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.