{"id":18488412,"url":"https://github.com/AaronCCWong/react-card-flip","last_synced_at":"2025-04-08T21:30:31.618Z","repository":{"id":37663427,"uuid":"82307438","full_name":"AaronCCWong/react-card-flip","owner":"AaronCCWong","description":"React component for card flipping animation.","archived":false,"fork":false,"pushed_at":"2024-08-30T10:49:26.000Z","size":5525,"stargazers_count":343,"open_issues_count":20,"forks_count":64,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-12-04T09:08:49.446Z","etag":null,"topics":["animation","card-flip","react","react-card-flip"],"latest_commit_sha":null,"homepage":"https://aaronccwong.github.io/react-card-flip","language":"TypeScript","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/AaronCCWong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-02-17T14:56:01.000Z","updated_at":"2024-11-06T08:16:38.000Z","dependencies_parsed_at":"2024-05-31T04:32:37.557Z","dependency_job_id":"4ff1d196-1372-41b8-b474-e4a78314167f","html_url":"https://github.com/AaronCCWong/react-card-flip","commit_stats":{"total_commits":136,"total_committers":17,"mean_commits":8.0,"dds":0.2647058823529411,"last_synced_commit":"8e130e2d905d690b15bd6666870eee8a8dd20e7f"},"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronCCWong%2Freact-card-flip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronCCWong%2Freact-card-flip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronCCWong%2Freact-card-flip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronCCWong%2Freact-card-flip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AaronCCWong","download_url":"https://codeload.github.com/AaronCCWong/react-card-flip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247930967,"owners_count":21020142,"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":["animation","card-flip","react","react-card-flip"],"created_at":"2024-11-06T12:51:42.144Z","updated_at":"2025-04-08T21:30:31.609Z","avatar_url":"https://github.com/AaronCCWong.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/AaronCCWong/react-card-flip.svg?branch=master)](https://travis-ci.org/AaronCCWong/react-card-flip)\n[![Coverage Status](https://coveralls.io/repos/github/AaronCCWong/react-card-flip/badge.svg?branch=master)](https://coveralls.io/github/AaronCCWong/react-card-flip?branch=master)\n\n# ReactCardFlip\n\nReact Card Flip is allows you to use the card flipping animation. Credit for the\nCSS goes to [David Walsh](https://davidwalsh.name/css-flip).\n\n## Demo \u0026 Examples\n\nLive demo: [Demo](https://aaronccwong.github.io/react-card-flip/)\n\nTo build the examples locally with npm, run:\n\n```\nnpm install\nnpm run build-example \u0026\u0026 npm run start\n```\n\nTo build the examples locally with yarn, run:\n\n```\nyarn install\nyarn build-example \u0026\u0026 yarn start\n```\n\nThen [`localhost:8080`](http://localhost:8080) should open in a browser. If not\nyou can go to that directly.\n\n## Installation\n\nTo use react-card-flip, install it from NPM with npm using the command:\n\n```\nnpm install --save react-card-flip\n```\n\nTo use react-card-flip, install it from NPM with yarn using the command:\n\n```\nyarn add react-card-flip\n```\n\nYou can also use the standalone build by including `lib/react-card-flip.js` in\nyour page. If you use this, make sure you have already included React, and it is\navailable as a global variable.\n\n## Usage\n\nTo use this component, first import ReactCardFlip:\n\n```javascript\nimport ReactCardFlip from 'react-card-flip';\n```\n\nand then provide it with two child components with keys marked `front` and `back`\nso that the component can tell which component should be in the front and which\ncomponent should be in the back.\n\nThis component only allows for manual card flip so make sure to include a tag\nthat has an onClick handler for each side of the card.\n\nThe animation itself will be controlled by the prop `isFlipped`. Use this to\ncontrol whether to show the front or the back of the card.\n\n```javascript\nclass App extends React.Component {\n  constructor() {\n    super();\n      this.state = {\n      isFlipped: false\n    };\n    this.handleClick = this.handleClick.bind(this);\n  }\n\n  handleClick(e) {\n    e.preventDefault();\n    this.setState(prevState =\u003e ({ isFlipped: !prevState.isFlipped }));\n  }\n\n  render() {\n    return (\n      \u003cReactCardFlip isFlipped={this.state.isFlipped} flipDirection=\"vertical\"\u003e\n        \u003cYOUR_FRONT_CCOMPONENT\u003e\n          This is the front of the card.\n          \u003cbutton onClick={this.handleClick}\u003eClick to flip\u003c/button\u003e\n        \u003c/YOUR_FRONT_CCOMPONENT\u003e\n\n        \u003cYOUR_BACK_COMPONENT\u003e\n          This is the back of the card.\n          \u003cbutton onClick={this.handleClick}\u003eClick to flip\u003c/button\u003e\n        \u003c/YOUR_BACK_COMPONENT\u003e\n      \u003c/ReactCardFlip\u003e\n    )\n  }\n}\n```\n\n`YOUR_FRONT_CCOMPONENT` and `YOUR_BACK_COMPONENT` here are meant to be the two\ncomponents that you plan to use for the card, one for the front of the card\nand one for the back of the card.\n\n### Properties\n\n| Props                | Type   | Description                                                                                                                 | Default      |\n| -------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------------ |\n| cardStyles           | object | `cardStyles.front` styles are applied to the front face component container and `cardStyles.back` styles are applied to the back face component container | undefined |\n| cardZIndex           | string | z-Index for the flip card. Used to help solve context stack issues while using multiple flip cards.                         | auto         |\n| containerStyle       | object | Extra css styling that can be applied to the container.                                                                     | {}           |\n| containerClassName   | string | Custom class name to be applied to the container.                                         | undefined     |\n| isFlipped            | bool   | False to show the front of the card, true to show the back                                                                  | undefined    |\n| flipSpeedBackToFront | number | The speed of the flip animation when the card flips from back to front, the higher the number the slower the flip animation | 0.6          |\n| flipSpeedFrontToBack | number | The speed of the flip animation when the card flips from front to back, the higher the number the slower the flip animation | 0.6          |\n| infinite             | bool   | False to rotate in opposite directions on both sides of the card, true to rotate in the same direction                      | false        |\n| flipDirection        | string | Direction of the card flip (options are: 'horizontal' or 'vertical' )                                                       | horizontal   |\n\n## Development (`src`, `lib` and the build process)\n\n**NOTE:** The source code for the component is in `src`. A transpiled CommonJS version (generated with Babel) is available in `lib` for use with node.js, browserify and webpack. A UMD bundle is also built to `lib`, which can be included without the need for any build system.\n\nTo build, watch and serve the examples (which will also watch the component source), run `npm run build-example \u0026\u0026 npm run start`.\n\n## Testing\n\nTo run tests for this project run one of the following commands:\n\n- `npm run test` - Runs tests then exits\n- `npm run test:watch` - Runs tests in watch mode\n- `npm run test:coverage` - Runs tests and creates a coverage report\n\n## Contributing\n\nFork this repo, add your proposed features and make a pull request. I will review as soon as possible.\n\n## License\n\nThis project is licensed under the terms of the MIT license. Check [LICENSE.txt](https://github.com/AaronCCWong/react-remark/blob/master/LICENSE.txt)\nfor more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAaronCCWong%2Freact-card-flip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAaronCCWong%2Freact-card-flip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAaronCCWong%2Freact-card-flip/lists"}