React integratie

De Clippy Editor biedt React wrappers via <code>@lit/react</code>, waarmee de Web Components naadloos in een React-applicatie gebruikt kunnen worden. Hieronder staan twee voorbeelden. Een eenvoudige editor en een samengestelde editor met context, toolbar, gutter en validatielijst.

Voorbeeld 1: eenvoudige editor

Dit voorbeeld toont de ClippyEditor component — de meest eenvoudige manier om de editor in React te gebruiken.

Voorbeeld code

import { ClippyEditor } from '@nl-design-system-community/editor-react';

export function ReactEditorExample() {
  return (
    <ClippyEditor
      id="react-editor-1"
      toolbarConfig={[
        ['format-select', 'language-select'],
        ['bold', 'italic', 'underline', 'code'],
        ['link', 'image-upload', 'insert-table'],
      ]}
    >
      <div slot="value">
        <h1>Kopniveau 1 in React editor</h1>
        <p>Dit is een voorbeeld van de Clippy Editor met een Lit React wrapper</p>
      </div>
    </ClippyEditor>
  );
}

Voorbeeld 2: context, content, gutter en validaties

Dit voorbeeld toont hoe ClippyContext, ClippyContent, ClippyToolbar, ClippyGutter en ClippyValidationsList samen gebruikt kunnen worden voor een volledig geconfigureerde editor.

Voorbeeld code

import {
  ClippyContent,
  ClippyContext,
  ClippyGutter,
  ClippyToolbar,
  ClippyValidationsList,
} from '@nl-design-system-community/editor-react';

export function ReactContextExample() {
  return (
    <ClippyContext id="react-editor-2" topHeadingLevel={3}>
      <div slot="value">
        <h1>Kopniveau 1 in React editor</h1>
        <p>
          Dit is een voorbeeld van de Clippy Editor <a href="#">met een Lit React wrapper</a>
        </p>
      </div>
      <ClippyToolbar
        config={[
          ['format-select', 'language-select'],
          ['bold', 'italic', 'underline', 'code'],
          ['link', 'image-upload', 'insert-table'],
        ]}
      />
      <ClippyContent>
        <ClippyGutter mode="list" />
      </ClippyContent>
      <ClippyValidationsList />
    </ClippyContext>
  );
}