open-index/open-npm huggingface dataset:
npm package: @fileverse-dev/ddraw
Description: Ddraw Editor is a powerful and customizable drawing editor built on top of the Tldraw library. This repository contains both example/demo source code and the package code for the Ddraw Editor component.
Latest version: 0.0.3

# Ddraw Editor

Ddraw Editor is a powerful and customizable drawing editor built on top of the Tldraw library. This repository contains both example/demo source code and the package code for the Ddraw Editor component.

## Repository Structure

- `/package`: Contains the package code for the Ddraw Editor component
- `/`: Root directory contains example and demo source code

## Features

- Customizable drawing interface
- Optional preview mode
- Customizable toolbar
- Built on top of Tldraw for robust drawing capabilities
- Responsive design with mobile support

## Installation

To use the Ddraw Editor in your project, you'll need to install it along with its dependencies:

### Prequisites

- You should be using tailwindcss and it must have tailwind configuration

`import { DdrawEditor } from '@fileverse-dev/ddraw'`

`import '@fileverse-dev/ddraw/styles'` in App.jsx/App.tsx

In your tailwind config, add this line to content array

`@fileverse-dev/ddraw/dist/index.es.js`

That's it, you should be able to use DdrawEditor now

```
## Props

The `DdrawEditor` component accepts the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `renderNavbar` | `(editor: Editor) => React.ReactNode` | `undefined` | Optional function to render a custom navbar. |
| `onChange` | `(snapshot: TLSnapshot) => void` | `undefined` | Callback function called when the drawing changes. |
| `isPreviewMode` | `boolean` | `false` | Enables read-only preview mode when true. |
| `snapshot` | `TLSnapshot` | `undefined` | Initial snapshot to load into the editor. |

## Customization

### Custom Navbar

You can provide a custom navbar by passing a function to the `renderNavbar` prop: