@clepit/react

Ang @clepit/react package ay nagbibigay ng mga React component para sa Clepit editor: ang ClepitContent, na naglalabas ng tapos na HTML sa server, at ang ClepitEditor, isang client-only na component na nagmamay-ari ng Editor.create lifecycle.

npm: @clepit/react · npm: @clepit/core

I-install

bun add @clepit/core @clepit/react

ClepitContent

Iginuguhit ng ClepitContent ang isang dokumento sa tapos na HTML sa pamamagitan ng renderBlocks, kaya gumagana ito sa Server Components, sa panahon ng SSR, at sa browser. Nasa unang response ang markup: nababasa ito ng mga crawler, at walang nagre-repaint sa mount. Sumasama ang core stylesheet bilang tag na dine-deduplicate ng React.

import { ClepitContent } from '@clepit/react';

export const Article = ({ document }) => <ClepitContent data={document} />;

Nabubuhay ang mga interactive na block pagkatapos ng mount sa pamamagitan ng activateBlocks mula sa @clepit/core: ang mga code variant tab, language sync at copy button, openapi response tab, at ang table CSV download ay gumagana lahat sa markup na iginuhit ng server; tanging data ng mga interactive na block ang tumatawid sa browser.

Mga opsyonal na prop:

ClepitEditor

Client-only ang ClepitEditor at nasa sarili nitong subpath, kaya ang pag-import ng display component ay hindi kailanman naghahatak ng editing code sa server bundle. Pagmamay-ari ng component ang Editor.create lifecycle: effect timing at StrictMode-safe na teardown.

'use client';

import { ClepitEditor } from '@clepit/react/editor';

export const Compose = ({ initialData, onSave }) => (
  <ClepitEditor
    initialData={initialData}
    onChange={data => onSave(data)}
    placeholder='Start writing'
  />
);

Ang mga prop ay EditorConfig mula sa @clepit/core maliban sa containerId (nire-render ng component ang sarili nitong holder), dagdag ang id, className, testId, at onApi, na tumatanggap ng EditorAPI na ibinabalik ng Editor.create. Uncontrolled ang editor: isang beses binabasa ang mga value field sa mount, laging nakikita ng mga callback ang props ng pinakabagong render, at sinisira ng unmount ang instance.