@instant-cms/react

React SDK für Instant CMS – ein selbst gehostetes Mini-CMS für bestehende Next.js- und React-Projekte.

CmsProvider, Hooks (useCms, useCmsState) und Komponenten (CmsText, CmsImage, CmsLink) sowie ein leichter API-Client (CmsClient) für den Zugriff auf die CMS-API.

Admin-Modus direkt auf der Seite

import { CmsProvider, CmsText } from "@instant-cms/react";

<CmsProvider admin>
  <h1><CmsText id="homepage.hero.title">Willkommen</CmsText></h1>
</CmsProvider>

/admin in der Adresszeile aufrufen (alternativ Strg/Cmd + Shift + E) öffnet den Login direkt auf der Website; nach der Anmeldung sind die CMS-Inhalte im Layout editierbar. „Speichern & beenden“ schreibt alle Änderungen, meldet ab und verlässt den Admin-Modus. Ohne gültige Anmeldung ist nichts änderbar – jeder Schreibzugriff wird serverseitig geprüft.

Damit /admin die Seite selbst ausliefert, braucht Next.js eine Middleware (@instant-cms/next/middleware, von instant-cms init erzeugt); SPAs nutzen ihren üblichen History-Fallback.

Optionen: admin={{ path, returnPath, username, shortcut, hash, button, onSaved }}.

Listen und Tabellen

import { CmsList, CmsField } from "@instant-cms/react";

<tbody>
  <CmsList id="preise.tabelle" fallback={[{ leistung: "Erstberatung", preis: "kostenlos" }]}>
    {(zeile, index) => (
      <tr key={index}>
        <td><CmsField name="leistung" /></td>
        <td><CmsField name="preis" /></td>
      </tr>
    )}
  </CmsList>
</tbody>

Im Admin-Modus erscheint neben dem Eintrag eine Leiste zum Hinzufügen, Duplizieren, Verschieben und Löschen. Die Liste ist ein CMS-Eintrag vom Typ list; das umgebende Markup bleibt das eigene.

Installation

npm install @instant-cms/react

Der einfachste Einstieg ist die CLI im Projektwurzelverzeichnis:

npx instant-cms init

Dokumentation: Getting Started · Architektur · Sicherheit

Lizenz: MIT