@clepit/react
Kifurushi cha @clepit/react kinatoa vijenzi vya React kwa kihariri cha Clepit: ClepitContent, kinachotoa HTML iliyokamilika kwenye seva, na ClepitEditor, kijenzi cha mteja pekee kinachomiliki mzunguko wa maisha wa Editor.create.
npm: @clepit/react · npm: @clepit/core
Sakinisha
bun add @clepit/core @clepit/reactClepitContent
ClepitContent huchora hati hadi HTML iliyokamilika kupitia renderBlocks, hivyo hufanya kazi ndani ya Server Components, wakati wa SSR, na kwenye kivinjari. Alama ziko katika jibu la kwanza: watambazaji huzisoma, na hakuna kinachochorwa upya wakati wa kupachika. Laha ya mitindo ya msingi huambatana kama lebo ya inayoondolewa nakala na React.
import { ClepitContent } from '@clepit/react';
export const Article = ({ document }) => <ClepitContent data={document} />;Vizuizi vya kuingiliana huwa hai baada ya kupachika kupitia activateBlocks kutoka @clepit/core: tabo za aina za msimbo, usawazishaji wa lugha na kitufe cha kunakili, tabo za majibu ya openapi, na upakuaji wa CSV wa jedwali vyote hufanya kazi kwenye alama zilizochorwa na seva; data ya vizuizi vya kuingiliana pekee ndiyo huvuka hadi kivinjari.
Props za hiari:
| Sehemu | Aina | Inahitajika | Maelezo |
|---|---|---|---|
| theme | 'auto' | 'light' | 'dark' | Hapana | 'auto' |
| themeOverrides | { light?, dark? } | Hapana | ThemeTokens |
| context | { docHref?, mapsEmbedKey?, activeVariant? } | Hapana | |
| transformHtml | (html: string) => string | Hapana | |
| className | string | Hapana | |
| testId | string | Hapana |
ClepitEditor
ClepitEditor ni ya mteja pekee na huishi kwenye njia yake ndogo, hivyo kuagiza kijenzi cha maonyesho hakuvuti kamwe msimbo wa uhariri kwenye kifurushi cha seva. Kijenzi kinamiliki mzunguko wa maisha wa Editor.create: muda wa effect na ubomoaji salama kwa StrictMode.
'use client';
import { ClepitEditor } from '@clepit/react/editor';
export const Compose = ({ initialData, onSave }) => (
<ClepitEditor
initialData={initialData}
onChange={data => onSave(data)}
placeholder='Start writing'
/>
);Props ni EditorConfig kutoka @clepit/core bila containerId (kijenzi huchora kishikilio chake), pamoja na id, className, testId na onApi, inayopokea EditorAPI iliyorejeshwa na Editor.create. Kihariri hakidhibitiwi: sehemu za thamani husomwa mara moja wakati wa kupachika, callbacks daima huona props za render ya hivi karibuni, na kuondoa hupachika huharibu nakala.