@cocoduro/import_button

Reusable Cocoduro recipe-import integration for Payload CMS websites. The package provides:

• a React import button for Next.js frontends;
• a Payload Lexical helper that extracts the ingredient list following a Zutaten … heading;
• backend-compatible items_b64 URL generation;
• optional impression and click tracking;
• standalone button CSS.

Install

npm install @cocoduro/import_button

Import the stylesheet once, typically from the root layout:

import "@cocoduro/import_button/styles.css";

Import using the recipe URL

To open Cocoduro with the recipe page as the import source, pass sourceUrl and omit ingredients:

import { CocoduroImportButton } from "@cocoduro/import_button/react";

<CocoduroImportButton
  sourceUrl="https://soundsvegan.com/2025/04/krautsalat-und-cole-slaw"
/>

The button opens https://cocoduro.de/import?url=<encoded sourceUrl> in a new tab. In the recipe template, set sourceUrl to each recipe's canonical URL. When ingredients are supplied, structured ingredient import takes priority and the generated link uses items_b64 instead of url.

Payload Lexical example

import { extractIngredientsFromPayloadLexical } from "@cocoduro/import_button";
import { CocoduroImportButton } from "@cocoduro/import_button/react";

export function Recipe({ post }: { post: RecipePost }) {
  const sourceUrl = `https://soundsvegan.com/${post.path}`;
  const ingredients = extractIngredientsFromPayloadLexical(post.content);

  return (
    <article>
      {/* Render the existing Payload rich-text content as usual. */}
      <RichText data={post.content} />

      <CocoduroImportButton
        ingredients={ingredients}
        sourceUrl={sourceUrl}
      />
    </article>
  );
}

Place the component wherever the button should appear in the recipe template. For a dedicated structured ingredients field, pass its values directly instead of using the Lexical extractor.

Structured ingredients

Strings are accepted and parsed by Cocoduro:

<CocoduroImportButton
  ingredients={["500 g Mehl", "2 Bananen", "1 Tasse Hafermilch"]}
  sourceUrl="https://example.com/my-recipe"
/>

Already structured values can be passed without losing their information:

<CocoduroImportButton
  ingredients={[
    { name: "Mehl", amount: 500, unit: "g" },
    { name: "Bananen", amount: 2 },
  ]}
  sourceUrl="https://example.com/my-recipe"
/>

When ingredients are available, the generated link uses items_b64. If no ingredients can be extracted, it falls back to ?url=<sourceUrl>.

Custom ingredient headings

The default extractor recognizes headings beginning with Zutaten. Supply a regular expression or predicate for other content conventions:

extractIngredientsFromPayloadLexical(post.content, {
  headingPattern: /^(ingredients|zutaten)\b/i,
});

Tracking

The React component sends the same minimal button.impression and button.click events as the WordPress integration. It does not set cookies or use local storage. Tracking can be disabled with trackImpressions={false} or trackClicks={false}.

License

GPL-2.0-or-later. See LICENSE for the full license text.

Development

npm test

Docker integration test

The repository contains a disposable Payload 3 + Next.js + SQLite application. It seeds a SoundsVegan-style Lexical recipe, reads it through Payload's Local API, extracts seven ingredients with this package, and renders the React import button.

From the repository root:

docker compose -f docker-compose.payload-test.yml up --build

Open:

http://localhost:3002

The seeded headless API is available at:

http://localhost:3002/api/recipes

Remove the disposable app and database with:

docker compose -f docker-compose.payload-test.yml down -v