@paulpaulstudio/strapi-render
v0.8.0
Published
React SDK für Strapi-Frontends mit onpage-edit-Support über cms.paulpaul.studio.
Downloads
94
Maintainers
nicklasneubauerReadme
@paulpaulstudio/strapi-render
React SDK für Strapi-Frontends mit Onpage-Editing über cms.paulpaul.studio.
Installation
npm install @paulpaulstudio/strapi-renderPeer-Deps: react@>=18, react-dom@>=18.
Setup
// app/layout.tsx (Next.js App Router) oder _app.tsx (Pages Router)
import { StrapiEditModeProvider } from "@paulpaulstudio/strapi-render";
export default function Layout({ children }) {
return (
<html>
<body>
<StrapiEditModeProvider>
{children}
</StrapiEditModeProvider>
</body>
</html>
);
}Der Provider liest ?__pp_edit=1&__pp_token=<jwt> aus der URL und aktiviert
den Edit-Mode automatisch. Im normalen Mode rendert das SDK keinerlei
zusätzliches DOM.
Komponenten
<StrapiText>
<StrapiText path="hero.title" value={page.hero.title} as="h1" />
<StrapiText path="hero.body" value={page.hero.body} fieldType="richText" as="div" /><StrapiImage>
<StrapiImage
path="hero.bg"
value={page.hero.bg}
baseUrl="https://cms.paulpaul.studio"
className="hero-bg"
/><StrapiList>
<StrapiList path="features" value={page.features} renderItem={(f, fp) => (
<div>
<StrapiText path={`${fp}.title`} value={f.title} as="h3" />
<StrapiImage path={`${fp}.icon`} value={f.icon} />
</div>
)} /><StrapiField> (Low-Level)
Für Custom-Layouts wo die High-Level-Komponenten nicht passen:
<StrapiField path="hero.gallery" type="media" value={page.hero.gallery}>
<MyCarousel images={page.hero.gallery} />
</StrapiField>Inline-editable Field-Types (Edit-Mode):
| type | Edit-Affordance |
|---|---|
| text / textarea / richText / email | contentEditable=plaintext-only, blur saved |
| number | wie text, beim Blur als Number geparst |
| checkbox | Click toggled den boolean Wert |
| select | Click öffnet Popover mit options-Auswahl |
| media | Click öffnet MediaPicker im Parent |
Boolean-Beispiel:
<StrapiField path="published" type="checkbox" value={post.published}>
<span>{post.published ? "Live" : "Entwurf"}</span>
</StrapiField>Select-Beispiel (Optionen sind required für die Combobox):
<StrapiField
path="status"
type="select"
value={post.status}
options={["draft", "published", "archived"]}
>
<span>{post.status}</span>
</StrapiField>
// Mit Labels:
<StrapiField
path="priority"
type="select"
value={task.priority}
options={[
{ value: "low", label: "Niedrig" },
{ value: "high", label: "Hoch" },
]}
>
<span>{task.priority}</span>
</StrapiField>Edit-Mode
Im Edit-Mode (?__pp_edit=1):
- Jedes Strapi-Feld bekommt einen
data-pp-edit="<path>"-Attribut - Hover zeigt orangen Outline (P&P-Brand-Accent)
- Click sendet
pp:edit:clickpostMessage an den Parent (cms.paulpaul.studio) - Parent zeigt Editor-Popover mit dem passenden Field-Input
Im Normal-Mode: identisches HTML wie ohne SDK — kein Overhead.
Hosting & Onpage-Editor
Onpage-Editing ist Feature des P&P-Hostings. Self-hosted Sites bekommen den CMS-Editor, aber kein Onpage-Mode. Webstudio-Sites haben Onpage nativ (eigener Webstudio-Renderer-Patch).
Lizenz
UNLICENSED — internes Paul & Paul Studio Tooling.