https://github.com/ahmednooor/touchflip-react
A Touch-Friendly Reusable Flipping Component For ReactJS
https://github.com/ahmednooor/touchflip-react
component flip flippingcard flipview react reactjs reusable reusable-components swipe touch-enabled
Last synced: 5 months ago
JSON representation
A Touch-Friendly Reusable Flipping Component For ReactJS
- Host: GitHub
- URL: https://github.com/ahmednooor/touchflip-react
- Owner: ahmednooor
- Created: 2018-07-12T18:17:28.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-15T02:39:31.000Z (almost 8 years ago)
- Last Synced: 2025-11-02T07:14:25.221Z (7 months ago)
- Topics: component, flip, flippingcard, flipview, react, reactjs, reusable, reusable-components, swipe, touch-enabled
- Language: JavaScript
- Homepage: https://ahmednooor.github.io/touchflip-react
- Size: 1.16 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# touchflip-react
> A Reusable Flipping Component For ReactJS
[](https://www.npmjs.com/package/touchflip-react)
## Demo
> https://ahmednooor.github.io/touchflip-react
## Install
```bash
npm install --save touchflip-react
```
## Usage
```jsx
import React, { Component } from 'react'
import TouchFlip from 'touchflip-react'
class Example extends Component { render () { return (
{}}
// ^ 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
Front Side
}
back={ // markup/jsx for the back side
{/* ^ use data-noflip on each element
you want to prevent flipping when
swiping or tapping that element */}
{/* ^ see this one does not have data-noflip, hence
the flipping occurs when you swipe or tap it */}
}
/>
); } }
```
> see `example/src/App.js` to check the code for demo app.
## Development Guide
- This component is packaged by `create-react-library` (https://www.npmjs.com/package/create-react-library).
- Refer to their latest documentation.
- The gist is, two npm starts, one in `/` and the other in `example/` dir.
## License
MIT © [ahmednooor](https://github.com/ahmednooor)