Lilac Editor - React Adapter

Getting Started with React

Lilac Editor provides a React component wrapper that integrates seamlessly with React applications using hooks and TypeScript.

Installation

# Using npm
npm install @lilac-wysiwyg/react

# Using pnpm
pnpm add @lilac-wysiwyg/react

# Using yarn
yarn add @lilac-wysiwyg/react

Basic Usage

import { LilacEditor } from '@lilac-wysiwyg/react';

function App() {
  const [content], setContent() = useState('<p>Hello World!</p>');

  return (<LilacEditor
    value={content}
    onChange={(newContent) => setContent(newContent)}
    toolbar={{ show: true }}
    placeholder="Start writing..."
  />);
}

Features

Hooks Support

Full access to editor state through React hooks with automatic re-renders.

TypeScript Ready

Complete TypeScript definitions included for type-safe integration.

Controlled & Uncontrolled

Supports both controlled (value-based) and uncontrolled modes.

Custom Toolbar

Configure toolbar buttons with the tools prop array.

API Reference

interface LilacEditorProps {
  value?: string;
  onChange?: (content: string) => void;
  toolbar?: { show: boolean }
  placeholder?: string;
  theme?: 'light' | 'dark';
  readOnly?: boolean;
  plugins?: EditorPlugin[];
}

React Adapter v0.5.0