{"id":16832470,"url":"https://github.com/kennethormandy/react-flipcard","last_synced_at":"2025-04-11T04:33:13.737Z","repository":{"id":145823361,"uuid":"121478670","full_name":"kennethormandy/react-flipcard","owner":"kennethormandy","description":"A flippable card, with almost no opinions on styling.","archived":false,"fork":false,"pushed_at":"2022-04-28T17:01:59.000Z","size":351,"stargazers_count":22,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T02:40:17.544Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"http://react-flipcard.kennethormandy.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kennethormandy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-14T06:29:11.000Z","updated_at":"2024-05-17T16:47:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"ba379e98-10ca-4616-b181-18e3cc9deda1","html_url":"https://github.com/kennethormandy/react-flipcard","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-flipcard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-flipcard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-flipcard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kennethormandy%2Freact-flipcard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kennethormandy","download_url":"https://codeload.github.com/kennethormandy/react-flipcard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248345202,"owners_count":21088231,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react"],"created_at":"2024-10-13T11:49:12.100Z","updated_at":"2025-04-11T04:33:13.698Z","avatar_url":"https://github.com/kennethormandy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flipcard\n\nAnother React Flipcard, based on [@mzabriskie](https://github.com/mzabriskie)’s [react-flipcard](https://github.com/mzabriskie/react-flipcard), but with support for React v16, and some other considerations for the [Mort Modern](http://mort-modern.losttype.com/) type specimen site.\n\n## Installation\n\n```sh\nnpm install --save @kennethormandy/react-flipcard\n```\n\n## Example\n\n```jsx\nimport React from 'react'\nimport { render } from 'react-dom'\nimport Flipcard from '@kennethormandy/react-flipcard'\n\n// Import minimal required styles however you’d like\nimport '@kennethormandy/react-flipcard/dist/Flipcard.css'\n\nclass App extends React.Component {\n  constructor() {\n    super()\n\n    this.state = {\n      flipped: false,\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={e =\u003e this.setState({ flipped: !this.state.flipped })}\u003e\n          Flip\n        \u003c/button\u003e\n        \u003cFlipcard flipped={this.state.flipped}\u003e\n          \u003ch1\u003eOne\u003c/h1\u003e\n          \u003ch1\u003eTwo\u003c/h1\u003e\n        \u003c/Flipcard\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nrender(\u003cApp /\u003e, document.getElementById('target'))\n```\n\n### Transition Type\n\n#### Horizontal\n\n```jsx\n\u003cFlipcard type=\"horizontal\"\u003e\n  \u003ch1\u003eOne\u003c/h1\u003e\n  \u003ch1\u003eTwo\u003c/h1\u003e\n\u003c/Flipcard\u003e\n```\n\n#### Revolving Door\n\n```jsx\n\u003cFlipcard type=\"revolving-door\"\u003e\n  \u003ch1\u003eOne\u003c/h1\u003e\n  \u003ch1\u003eTwo\u003c/h1\u003e\n\u003c/Flipcard\u003e\n```\n\n### Conditional two-column example\n\n![Gif showing the two-column layout turning into a Flipcard below a certain breakpoint.](./media/flipcard-twocol-demo.gif)\n\nLike in the [Mort Modern](http://mort-modern.losttype.com/) type specimen site, it’s possible to change or disable the minimal Flipcard styles at certain breakpoints. This can be done entirely through CSS, but you might also want to use `matchMedia` to change some other part of your user interface (ex. disabling the button).\n\n```jsx\n\u003cFlipcard\u003e\n  \u003cCard\u003e\n    \u003cdiv\u003e\n      \u003ch2\u003eColumn 1\u003c/h2\u003e\n      \u003cp\u003eThe main column on small viewports.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/Card\u003e\n  \u003cCard\u003e\n    \u003cdiv\u003e\n      \u003ch2\u003eColumn 2\u003c/h2\u003e\n      \u003cp\u003eFlip to see me on smaller viewports.\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/Card\u003e\n\u003c/Flipcard\u003e\n```\n\nWithin your CSS, you might do something like this:\n\n```css\n/* If the viewport is wide enough: */\n@media (min-width: 750px) {\n\n  /* Use the flipper as a Flexbox container: */\n  .Flipcard-flipper {\n    display: flex;\n    transform: none !important;\n  }\n\n  /* Show both cards and remove the transitions: */\n  .Flipcard-front, \n  .Flipcard-back {\n    position: relative;\n    transform: none !important;\n    opacity: 1 !important;\n  }\n}\n```\n\n## Importing styles\n\nPeople have a lot of different opinions about how to manage styles alongside React. The guideline I have decided to follow is that my approach should work with a fresh Create React App setup, and not impose another dependency.\n\nIf you’d like the styles already minified and autoprefixed, import the CSS from `dist`:\n\n```js\nimport '@kennethormandy/react-flipcard/dist/Flipcard.css'\n```\n\nIf you’re already running things through your own CSS build process that’s going to do those things anyway, you might want to import the styles from `src` instead. Then, the source maps will map back to your CSS before minification, too:\n\n```js\nimport '@kennethormandy/react-flipcard/src/Flipcard.css'\n```\n\nYou can also path to these files from Sass, PostCSS, or another CSS build process. The styles are also quite minimal and you might want to change them, so there’s nothing wrong with copying and building on the CSS partial yourself rather than using the provided styles directly.\n\n## Credits\n\n* [react-flipcard](https://github.com/mzabriskie/react-flipcard) by [@mzabriskie](https://github.com/mzabriskie)\n* [react-card-flip](https://github.com/AaronCCWong/react-card-flip) by [@AaronCCWong](https://github.com/AaronCCWong), for the revolving-door transition\n* [Create a CSS Flipping Animation](https://davidwalsh.name/css-flip) by David Walsh\n\n## License\n\n[The MIT License (MIT)](LICENSE.md)\n\nCopyright © 2017–2018 [Kenneth Ormandy Inc.](https://kennethormandy.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennethormandy%2Freact-flipcard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkennethormandy%2Freact-flipcard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkennethormandy%2Freact-flipcard/lists"}