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
