react-health-card

react-health-card

An awesome health card component.

Installation

yarn add react-health-card

or

npm install react-health-card --save

Usage

import HealthCard from 'react-health-card';

<HealthCard
  cardNumber="12345678"
  name="Jake Moxey"
  issueDate="12122020"
  issueNumber="12"
  rank="01"
  memberNumber="87654321A"
  memberNumberLength={9}
  focused="memberNumber"
  />

Available Props

Property	Type	Default	Description
bgColorFront	string	#2053B1	The background color of the front of the card.
bgColorBack	string	#2053B1	The background color of the back of the card.
focused	string	null	The focused card attribute. Available: null, rank, name, memberNumber, issueDate, issueNumber, cardNumber
isFlipped	boolean	false	Is the card flipped?
logoUri	string	null	The logo of the card.
logoPosition	string	front	Position of the logo. Available: front, back
logoStyle	string	right: 10%; top: 10%	Style of the logo.
cardNumber	string	null	The card number.
cardNumberPosition	string	front	Position of the card number. Available: front, back
cardNumberTitle	string	Card number	Card number title
cardNumberLength	number	8	Card number length
cardNumberStyle	string	left: 10%; top: 20%	Style of the card number element (CSS)
issueDate	string	null	The card issue date.
issueDatePosition	string	front	Position of the issue date. Available: front, back
issueDateTitle	string	Issue date	The issue date title.
issueDateFormat	string	DD/MM/YYYY	The issue date format.
issueDateStyle	string	bottom: 15%; left: 65%;	Style of the issue date element (CSS)
issueNumber	string	null	The issue number.
issueNumberPosition	string	back	Position of the issue number. Available: front, back
issueNumberTitle	string	Issue number	Issue number title
issueNumberLength	number	2	Issue number length
issueNumberStyle	string	left: 10%; bottom: 15%	Style of the issue number element (CSS)
memberNumber	string	null	The member number.
memberNumberPosition	string	front	Position of the member number. Available: front, back
memberNumberTitle	string	Member number	Member number title
memberNumberLength	number	8	Member number length
memberNumberStyle	string	left: 10%; bottom: 15%	Style of the member number element (CSS)
rank	string	null	The card rank.
rankPosition	string	front	Position of the card rank. Available: front, back
rankLength	number	2	Card rank length
rankStyle	string	left: 10%; bottom: 40%	Style of the card rank element (CSS)
rankTitle	string	null	Card rank title.
name	string	null	The card holder's name.
namePlaceholder	string	FULL NAME	Placeholder for card holder's name.
namePosition	string	front	Position of the card holder's name. Available: front, back
nameLength	number	2	Name length
nameStyle	string	left: 20%; bottom: 40%	Style of the card holder's name element (CSS)
showLogo	boolean	true	Shows the health card logo.
showCardNumber	boolean	true	Shows the card number.
showIssueDate	boolean	true	Shows the issue date.
showIssueNumber	boolean	true	Shows the issue number.
showMemberNumber	boolean	true	Shows the member number.
showRank	boolean	true	Shows the health card logo.
showName	boolean	true	Shows the health card logo.
showSwipeBar	boolean	true	Shows the swipe bar.

License

MIT © Jake Moxey