{"id":26242088,"url":"https://github.com/medelman17/flexy-flip-cards","last_synced_at":"2025-04-23T12:31:22.738Z","repository":{"id":57238427,"uuid":"121287232","full_name":"medelman17/Flexy-Flip-Cards","owner":"medelman17","description":"Responsive cards that flip. Built with React, Styled-Components, and CSS Grid.","archived":false,"fork":false,"pushed_at":"2019-01-02T19:11:39.000Z","size":113,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-19T11:24:27.292Z","etag":null,"topics":["cards","cssgrid","react","reactjs","reactjs-components","styled-components"],"latest_commit_sha":null,"homepage":"","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/medelman17.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-12T18:48:58.000Z","updated_at":"2024-06-19T06:29:50.000Z","dependencies_parsed_at":"2022-08-26T15:11:55.268Z","dependency_job_id":null,"html_url":"https://github.com/medelman17/Flexy-Flip-Cards","commit_stats":null,"previous_names":["slashlaw/flexy-flip-cards"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medelman17%2FFlexy-Flip-Cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medelman17%2FFlexy-Flip-Cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medelman17%2FFlexy-Flip-Cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/medelman17%2FFlexy-Flip-Cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/medelman17","download_url":"https://codeload.github.com/medelman17/Flexy-Flip-Cards/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250434761,"owners_count":21430158,"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":["cards","cssgrid","react","reactjs","reactjs-components","styled-components"],"created_at":"2025-03-13T09:42:48.601Z","updated_at":"2025-04-23T12:31:22.711Z","avatar_url":"https://github.com/medelman17.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flexy Flip Cards\n\nResponsive cards that flip. Built with React, Styled-Components, and CSS Grid. `position: absolute` not required. \n\n### **[Live Demo](https://build-vlkfjpbenp.now.sh/).**\n\n## Quick Overview\n\nCards that flip are frickin' sweet. But, since they typically require developers to use set dimensions and `position: absolute`, they're a pain in the butt to style when you're not sure how much space you'll have (i.e., responsive design) or need (i.e., rendering random data). Not anymore. Flexy FlipCards, inspired by [React Flip Card](https://github.com/mzabriskie/react-flipcard), don't care what you put in them. Check it out.\n\n\n## Install\n\n\n```sh\nnpm install --save flexy-flipcards\n```\n\n## Instructions\n\n\n1. FlexyFlipCard Requires Exactly Two Children\n...The first child will be rendered on the front of the card. The second child will be rendered on the back. \n\n2. Set `ref='flipper'` Somewhere in Each Child\n...The card component will search through your component tree and add an `onClick` funtion to whatever component has `ref='flipper'`\n\n## Example\n\n\n```javascript\nimport React, { Component } from 'react';\nimport { FlexyFlipCard } from 'flexy-flipcards';\n\nclass App extends Component {\n    render() {\n        return (\n            \u003cFlexyFlipCard\n                frontBackgroundColor=\"#B96aC9\"\n                backBackgroundColor=\"#231b1b\"\n            /\u003e\n                \u003cdiv\u003e\n                {/* Pass in whatever you want to be rendered on the front side of the card. Just make sure that somewhere in the component subtree, one child has a ref='flipper' attribute. An 'onClick' function will be added to it. */}\n                \u003c/div\u003e\n                \u003cdiv\u003e\n                {/* Pass in whatever you want to be rendered on the back side of the card. Just make sure that somewhere in the component subtree, one child has a ref='flipper' attribute. An 'onClick' function will be added to it. */}\n                \u003c/div\u003e\n            \u003c/FlexyFlipCard\u003e\n        );\n    }\n}\n```\n\n## Available Props\n\nNote: Apart from `frontBackgroundColor` and `backBackgroundColor`, you can style your children however and by whatever means you want. That said, the following props are available: \n\nProp | Type | Explanation\n--- | --- | ---\nfrontBackgroundColor | String | set background color of card front. \nfrontContainerStyle | Object | add additional styling for card front outer container. \nfrontContentStyle | Object | add additional styling for card front inner container. \nbackBackgroundColor | String | Sets background color of card back. \nbackContainerStyle | Object | add additional styling for card back outer container. \nbackContentStyle | Object | add additional styling for card back inner container. \n\n## Updates\n\nv0.1.1: fix for issue with Firefox 58 whereby janky animation occurrs if `transform-style: preserve-3d` and `overflow: hidden` are set at the same time. See [Bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1431893)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedelman17%2Fflexy-flip-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmedelman17%2Fflexy-flip-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmedelman17%2Fflexy-flip-cards/lists"}