playing-cards-react

This package provides simple to use playing card components for React projects. The interface was designed so that usage mimics how card are described colloquially.

Installation: npm install playing-cards-react

Usage

To return a JSX component containing the card, utilize Card.${rank}.of(suitName).

Card.ten.of("Diamonds")

Card also has utility functions for each suit, if you don't care to specify the suit:

Card.jack.ofSpades()

These card components will fill the height of their container, and auto-scale their width with the appropriate aspect ratio.

This package also provides a simple way to render a hand of playing cards -- the CardCollection component. It requires one prop -- a list of CardData objects. This component will expand to fill the full height and width of its parent container.

Example:

<CardCollection cardList={[
  {
    rank: "two",
    suit: "Spades",
  },
  {
    rank: "five",
    suit: "Hearts",
  }
]}

Future Updates

Future updates will provide onClick() handlers for the cards, as well as functions to manage the inventory of a CardCollection.