https://github.com/liams-h/react-scrycards
npm package for react components that use scryfall api
https://github.com/liams-h/react-scrycards
javascript mtg mtg-cards npm-package react react-components reactjs scryfall scryfall-api typescript
Last synced: 2 months ago
JSON representation
npm package for react components that use scryfall api
- Host: GitHub
- URL: https://github.com/liams-h/react-scrycards
- Owner: LiamS-H
- Created: 2024-09-19T22:29:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-04T01:26:12.000Z (over 1 year ago)
- Last Synced: 2025-02-04T02:26:24.992Z (over 1 year ago)
- Topics: javascript, mtg, mtg-cards, npm-package, react, react-components, reactjs, scryfall, scryfall-api, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-scrycards
- Size: 532 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Scrycards
This library provides react components for rendering cards with data from [Scryfall API](https://scryfall.com/docs/api).
This project is unaffiliated with Scryfall
## Installation
```bash
npm install react-scrycards
```
### Importing CSS
```tsx
import "react-scrycards/dist/index.css";
```
# Examples
## Base Use Case
### Context
```tsx
import { ScrycardsContextProvider } from "react-scrycards";
```
This context provides a function to fetch a card asyncronously. If the card doesn't exist in the cache, the card is fetched from Scryfall. This context is optimized for high volume renders; requests are batched on each render cycle so a page which renders 50 new cards will only make 1 fetch request.
```ts
requestCard(arg0:string)
```
The other function provided by the context allows prefetching of cards.
This is great for scenarios where the cardpool is known beforehand but cards may be rendered over time (such as in a simulator).
By prefetching, you only fetch once instead of each time a new card is rendered.
```ts
preloadCards(arg0:string[])
```
### ScryNameCard
```tsx
import { ScrycardsContextProvider, ScryNameCard } from "react-scrycards";
```
Rendering and fetching a card is as simple as using the `````` inside [the context](#context).
`````` wraps `````` to provide a card object from a name or id using the Scrycards Context.
All Scrycard card components have several props to control how the rendered card looks.
Try using ```"animated"``` for a tasteful hover animation, or ```"flipable"``` to automatically handle multifaced or multisided cards.
## Custom Use Case
```tsx
import { Scrycard, Scrytext, IScrytextProps } from "react-scrycards";
import ScryfallCard from "@scryfall/api-types"
function CustomScrytext(props: IScrytextProps) {
const { symbols } = useSymbolsFromCustomContext()
return
}
function CustomScrycard(props:{card: ScryfallCard.ANY}) {
return
}
```
### Scrycard
While [the context](#context) is great for providing a link between **card names** and **card ids** to their Scryfall objects, an application may want to take advantage of the components without [the context](#context).
`````` renders a ```card:ScryfallCard.ANY``` object without using [the context](#context).
### Scrytext
Rendering Scrycards outside [the context](#context) works great **except when using the ```textOnly``` prop**.
Because, `````` doesn't have a map for {?} strings to their symbols unless it is fetched.
`````` accepts a ```symbol_text_renderer()``` (such as ``````) to parse text with {?} strings and replace with the corresponding symbols.
This renderer is used for the oracle text and mana cost for ```textOnly``` layout.
`````` accepts a ```IScrysymbolMap``` to match strings like "{R}" to their corresponding symbol uris.
`````` is also an option that wraps `````` to provide a symbol renderer that pulls symbols from [the context](#context).