Letele Playing Cards

https://www.npmjs.com/package/@letele/playing-cards

Admin

Letele Playing Cards is a React component library providing SVG-based playing card components with...

Tokens:1,454

Snippets:25

Trust Score:9.6

Update:6 months ago

Show doc for...

Tokens:

Raw

### Install the package

Source: https://www.npmjs.com/package/%40letele/playing-cards?activeTab=versions

Use npm to install the package in your project.

```bash
npm i @letele/playing-cards
```

--------------------------------

### Import and render a specific card

Source: https://www.npmjs.com/package/%40letele/playing-cards?activeTab=versions

Import a specific card component directly from the package and render it within a container.

```javascript
import { Sq } from '@letele/playing-cards';

//...

return (
  <div className='card-container'>
    <Sq style={{ height: '100%', width: '100%' }} />
  </div>
);
```

--------------------------------

### Access cards from the deck object

Source: https://www.npmjs.com/package/%40letele/playing-cards?activeTab=versions

Import the entire deck as an object to dynamically access and render specific card components.

```javascript
import * as deck from '@letele/playing-cards';

const Card = deck['Sq'];

//...

return (
  <div className='card-container'>
    <Card style={{ height: '100%', width: '100%' }} />
  </div>
);
```

--------------------------------

### Set card container dimensions

Source: https://www.npmjs.com/package/%40letele/playing-cards?activeTab=versions

Ensure the SVG card fills its container by setting its height and width to 100%.

```javascript
return (
  <div className='card-container'>
    <Card style={{ height: '100%', width: '100%' }} />
  </div>
);
```

Tokens:

Raw