@rikaido/react

Headless, composable React for cooking apps, on Rikaido's foundations: the harness verdict, the food graph, the ingredient cast, and the small pure things every cooking app rebuilds — scaling, units, a timer, cook-mode steps.

npm install @rikaido/react @rikaido/sdk

import { RikaidoProvider, Verdict, useVerdict, IngredientPortrait, AllergenBadges } from "@rikaido/react";
import "@rikaido/react/atelier.css"; // one way to draw it; or write your own against the data attributes

function App() {
  return (
    <RikaidoProvider apiKey={process.env.RIKAIDO_KEY!} locale="fr">
      <Checked recipe={recipe} />
    </RikaidoProvider>
  );
}

function Checked({ recipe }) {
  const verdict = useVerdict(recipe, { allergies: ["arachide"] });
  if (verdict.status !== "ready") return null;
  return (
    <Verdict.Root verdict={verdict.data}>
      <Verdict.Rows />
      <Verdict.Lock />
    </Verdict.Root>
  );
}

What is in the box

| Piece | What it does | | --- | --- | | RikaidoProvider | One client, one locale, one cache. | | Verdict.Root / Rows / Row / Issue / Lock, useVerdict, verdictRows | The re-read: eight rows in the validator's order, each clean, noted, failed, refused or not run. Cook-facing sentences in FR and EN off the published spec. | | IngredientPortrait, useIngredientPortrait, useToyUrl | The kawaii drawing inline, or the 3D toy. | | AllergenBadges, Substitutions, useIngredient | What the graph knows: allergens, animal, seafood, swaps. known: false is drawn as such. | | RecipeReader, useRecipeRead | A URL, a markdown or a text, read into a recipe. | | scaleRecipe, parseQuantity, formatQuantity, useScaledRecipe | « 1 ½ », « 2-3 », « 3/4 » in; scaled and pretty out. Pure. | | useUnits, convertQuantity, temperature | Metric and imperial, both ways. Pure. | | useTimer, timerReducer, formatClock | A drift-free kitchen timer. | | useCookSteps | One step at a time, with the keyboard handlers. |

Every component is headless: data attributes (data-rikaido="verdict-row", data-state="refused", …) and render props, no styles of its own. atelier.css is one finish you can import.

The mark

Components that show Rikaido's data — the verdict, a portrait, the graph's facts — carry « Propulsé par Rikaido » / “Powered by Rikaido” by default. The Apache-2.0 licence applies to the code; our terms of use ask that the mark stay on the free tier. attribution="mark" keeps only the seal; attribution="none" is for accounts on a paid plan.

Keys, prices and the free allowance: https://developer.rikaido.app.