https://github.com/javascript-pro/react-playing-cards
Customisable SVG based Playing Card graphics
https://github.com/javascript-pro/react-playing-cards
cards poker react
Last synced: 8 months ago
JSON representation
Customisable SVG based Playing Card graphics
- Host: GitHub
- URL: https://github.com/javascript-pro/react-playing-cards
- Owner: javascript-pro
- Created: 2020-02-19T22:33:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-18T06:04:36.000Z (almost 3 years ago)
- Last Synced: 2025-01-29T15:28:59.182Z (8 months ago)
- Topics: cards, poker, react
- Language: JavaScript
- Homepage:
- Size: 29.1 MB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Playing Cards
[github.io docs](https://listingslab.github.io/react-playing-cards/)
A framework for creating responsive animated SVG graphics in react implemented as a deck of playing cards. It has no need for jQuery or bitmap graphics. It's lightweight and easily deployable within any JS project
- [Animated with Greensock](./animation/README.md)
- Newfangled SVG graphic system; no bitmaps
- Material UI desgin system
#### Install & Run Demo
```bash
git clone https://github.com/listingslab/react-playing-cards.git
cd react-playing-cards
yarn && yarn start
```
#### Add to an existing project
- Copy `/Cards` directory and paste it anywhere you need in your app
- Install the Greensock animation package
```yarn add gsap```
### Implement
- Copy `/Cards` directory from [react-playing-cards](https://github.com/listingslab/react-playing-cards)
- Import & Use in an existing component
```bash
import { CardSingle } from '/Cards'
™ should __just work__