https://github.com/sbayd/react-flippy

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.
https://github.com/sbayd/react-flippy

Last synced: 2 months ago
JSON representation

Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

• Host: GitHub
• URL: https://github.com/sbayd/react-flippy
• Owner: sbayd
• License: mit
• Created: 2018-07-24T10:42:14.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T17:03:43.000Z (over 1 year ago)
• Last Synced: 2024-02-29T06:52:35.523Z (4 months ago)
• Language: JavaScript
• Homepage: https://react-flippy.vercel.app
• Size: 2.25 MB
• Stars: 311
• Watchers: 10
• Forks: 23
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• principe-awesome-stars - sbayd/react-flippy - Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content. (JavaScript)
• awesome-stars - react-flippy - Flippy allows you to create flipper event with your content. | sbayd | 310 | (JavaScript)

README

        
### React-Flippy

React-Flippy allows you to create flipping cards in React projects. 

It can be used as controlled or uncontrolled component.

![Vertical](hover_flippy.gif)

![Horizontal](toggle_flippy.gif)

[Live Demo](http://flippy.sbaydin.com "Live Demo")

#### How to install ?

`npm install react-flippy` or `yarn add react-flippy`

#### How to use ?

```javascript

import { useRef } from 'react';

import Flippy, { FrontSide, BackSide } from 'react-flippy';

function Sample() {

  const ref = useRef();

  return (

    

    

      RICK 


       { ref.current.toggle(); }}> Toggle via button

    

    

      ROCKS

    

  

  )

}

```

## API for Components

### Flippy

| Prop Name | Description   | Values  | Default   |

| :------------: | :------------: | :------------: | :------------: |

|  flipDirection | Direction of flip effect  |  horizontal/vertical | horizontal|

|  flipOnHover | Should card flip on mouse hover  |  true/false  |  false  |

|  flipOnClick   | Should card click on mouse click/touch  | true/false   | true  |

|  isFlipped   |  If you pass isFilipped prop component will be "controlled react component" and flipOnHover, flipOnClick functions will not work. You must handle this functionalities with your own logic.   | undefined/true/false   | undefined  |

| ...props   | Other props will be passed to container.  |   |   |

Note: Flippy component has a function named "toggle" in its reference.

### FrontSide

| Prop Name | Description   | Values  | Default   |

| :------------: | :------------: | :------------: | :------------: |

|  animationDuration | Duration of flip animation, should be used equal with back side for a good view.  |  number | 600 |

|  elementType | Dom element type for card  | dom element types  |  div  |

| ...props   | Other props will be passed to card.  |   |   |

### BackSide

| Prop Name | Description   | Values  | Default   |

| :------------: | :------------: | :------------: | :------------: |

|  animationDuration | Duration of flip animation, should be used equal with front side for a good view.  |  number | 600 |

|  elementType | Dom element type for card  | dom element types  |  div  |

| ...props   | Other props will be passed to card.  |   |   |

#### Notes

To run sample project, clone the repository and run yarn && yarn start

To build project, clone repository and run yarn && yarn build

### Changelog

#### 1.0.0 - 1.1.0 (10 May, 2021)

- React updated to 17.0.2

- Component converted to react-hook

- Dependencies upgraded

- Fixed bugs

#### 0.1.5 New build system targeting es5 modules. 

### Credits

Thanks to: https://github.com/fffilo/flipper I have used same methodology for style management.