react-playing-card-set
v0.6.0
Published
SVG playing cards as a react component
Downloads
4
Readme
React playing cards
A simple react component that renders svg playing cards by Adrian Kennard. Cards downloaded from https://www.me.uk/cards/ and distributed under CC0 license.
Usage
// includes all four deck types; very heavy
import Card from "@heruka-urgyen/react-playing-cards"
<Card card={card} deckType={deckType} height="XXpx" style={} className="" back />
// separate imports for decks:
// TcN - two colors normal faces
// TcB - two colors big faces
// FcN - four colors normal faces
// FcB - four colors big faces
import Card from "@heruka-urgyen/react-playing-cards/lib/TcN"
import Card from "@heruka-urgyen/react-playing-cards/lib/TcB"
import Card from "@heruka-urgyen/react-playing-cards/lib/FcN"
import Card from "@heruka-urgyen/react-playing-cards/lib/FcB"
<Card card={card} height="XXpx" back />
where
// card rank and suit, e.g 2c, Kh, Ad, etc
card :: String
card = rank + suit
where
rank = (2 | 3 ... 9 | T | J | Q | K | A)
suit = (c | d | h | s)
// various card styles
deckType :: String
deckType = (basic | four-color | big-face | big-face four-color)
// card height in px
height :: String
// show front (true by default, can be omitted)
front :: Boolean
// show back
back :: Boolean
// style and className are optional
Showcase
https://heruka-urgyen.github.io/react-playing-cards/
// building manually
cd example
npx webpack
// open dist/index.html in browser