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">
      <div slot="content">
        <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 } from '@nl-design-system-community/editor-react';
import { ClippyContext } from '@nl-design-system-community/editor-react';
import { ClippyGutter } from '@nl-design-system-community/editor-react';
import { ClippyToolbar } from '@nl-design-system-community/editor-react';
import { ClippyValidationsList } from '@nl-design-system-community/editor-react';

export function ReactContextExample() {
  return (
    <ClippyContext id="react-editor-2">
      <div slot="content">
        <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>
      <ClippyContent>
        <ClippyToolbar
          config={[
            ['format-select', 'language-select'],
            ['bold', 'italic', 'underline', 'code'],
            ['link', 'image-upload', 'insert-table'],
          ]}
        />
        <ClippyGutter mode="list" />
      </ClippyContent>
      <ClippyValidationsList />
    </ClippyContext>
  );
}