Crafting Recipe
Recipe card: batches, ingredients needed and what is missing. Free, MIT · Games › Crafting
A recipe card linking the quantity you want to whole batches, the output, the surplus and every ingredient's need against the stock. A known shortage blocks crafting, unknown stock is left to the app's check in onCraft, and the success animation only starts once the app confirms.
Installation
npx valyro-cli@latest add crafting-recipenpx shadcn@latest add https://valyro.xyz/r/crafting-recipe.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { CraftingRecipe } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
recipe * | Recipe | The recipe: what one batch makes and uses. | |
inventory | Record<string, number> | Stock per ingredient id; an ingredient without an entry is unknown (not zero). | |
quantity | number | Results asked for: a positive whole number. | |
defaultQuantity | number | 1 | Initial quantity when uncontrolled. Default 1. |
onQuantityChange | (quantity: number) => void | Called with the new quantity when it changes. | |
maxQuantity | number | Largest quantity the app allows; more shows an error instead of being clamped. | |
onCraft | (request: CraftRequest) => void | Promise<void> | Crafts: returning (or resolving) confirms it, throwing (or rejecting) refuses it. While a promise runs the button and the quantity are locked. Without it the card only computes. | |
disabled | boolean | false | Locks the quantity and the craft button. |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the result's heading. Default 3. |
labels | Partial<CraftingRecipeLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Tier List — S+…D tier list: portraits with role badges, role filter, drag with mouse, touch or keyboard, export
- Meta Table — Meta table: tier, win, pick and ban rates with patch-over-patch change, role and rank filters, virtualized
- Matchup Matrix — Counterpicks: champion-vs-champion heat matrix with tooltips, pick your champion, a list on phones
- Tournament Bracket — Tournament bracket: single and double elimination, series scores, winner, team path, monograms
- Patch Notes — Patch notes: champions and items with ability icons, before → after, buffs, nerfs and changes, filters
Previous: Patch Notes · Next: Toggle · All Games