@vizel/react 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,90 @@
+# @vizel/react
+
+React components for Vizel block-based Markdown editor.
+
+## Installation
+
+```bash
+npm install @vizel/react @vizel/core
+```
+
+## Requirements
+
+- React 19+
+- React DOM 19+
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import { Vizel } from "@vizel/react";
+import "@vizel/core/styles.css";
+
+function App() {
+  return <Vizel />;
+}
+```
+
+### With Editor Control
+
+```tsx
+import { VizelEditor, VizelBubbleMenu, useVizelEditor } from "@vizel/react";
+import "@vizel/core/styles.css";
+
+function App() {
+  const editor = useVizelEditor();
+
+  return (
+    <>
+      <VizelEditor editor={editor.current} />
+      <VizelBubbleMenu editor={editor.current} />
+    </>
+  );
+}
+```
+
+### Markdown Import/Export
+
+```tsx
+import { useVizelEditor, useVizelMarkdown } from "@vizel/react";
+
+function App() {
+  const editor = useVizelEditor();
+  const { getMarkdown, setMarkdown } = useVizelMarkdown(() => editor.current);
+
+  const handleExport = () => {
+    const markdown = getMarkdown();
+    console.log(markdown);
+  };
+
+  return <VizelEditor editor={editor.current} />;
+}
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Vizel` | All-in-one editor with bubble menu |
+| `VizelEditor` | Editor component |
+| `VizelBubbleMenu` | Floating formatting toolbar |
+| `VizelSlashMenu` | Slash command menu |
+| `VizelIconProvider` | Custom icon provider |
+
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useVizelEditor` | Create and manage editor instance |
+| `useVizelMarkdown` | Markdown import/export |
+| `useVizelAutoSave` | Auto-save functionality |
+| `useVizelState` | Editor state management |
+
+## Documentation
+
+See the [main repository](https://github.com/seijikohara/vizel) for full documentation.
+
+## License
+
+MIT