excalidraw v0.6.4

This library is deprecated. Please use @excalidraw/excalidraw.

Excalidraw

Excalidraw exported as a component to directly embed in your projects

Installation

You can use npm

npm install react react-dom excalidraw

or via yarn

yarn add react react-dom excalidraw

After installation you will see the below font files in dist directory which you will have to copy to the path from where assets are served. In the demo its served from public folder.

Cascadia.woff2
FG_Virgil.woff2

Demo

Try here

Usage

import React, { useState } from "react";
import Excalidraw from "excalidraw";
import InitialData from "./initialData";

import "excalidraw/dist/excalidraw.min.css";
import "./styles.css";

export default function App() {
  const onChange = (elements, state) => {
    console.log("Elements :", elements, "State : ", state);
  };

  const onUsernameChange = (username) => {
    console.log("current username", username);
  };
  const [dimensions, setDimensions] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  const onResize = () => {
    setDimensions({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  };

  useEffect(() => {
    window.addEventListener("resize", onResize);

    return () => window.removeEventListener("resize", onResize);
  }, []);

  const { width, height } = dimensions;
  const options = { zenModeEnabled: true, viewBackgroundColor: "#AFEEEE" };
  return (
    <div className="App">
      <Excalidraw
        width={width}
        height={height}
        initialData={InitialData}
        onChange={onChange}
        options={options}
        user={{ name: "Excalidraw User" }}
        onUsernameChange={onUsernameChange}
      />
    </div>
  );
}

Props

width

This props defines the width of the Excalidraw component. Defaults to window.innerWidth if not passed.

height

This props defines the height of the Excalidraw component. Defaults to window.innerHeight if not passed.

initialData

This helps to load Excalidraw with initialData. Defaults to []. This should be array of [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw-embed/blob/58178c388ae577140a1c679b5733f33e3722498a/src/element/types.ts#L44) as shown below.

[
  {
    type: "rectangle",
    version: 141,
    versionNonce: 361174001,
    isDeleted: false,
    id: "oDVXy8D6rom3H1-LLH2-f",
    fillStyle: "hachure",
    strokeWidth: 1,
    strokeStyle: "solid",
    roughness: 1,
    opacity: 100,
    angle: 0,
    x: 100.50390625,
    y: 93.67578125,
    strokeColor: "#000000",
    backgroundColor: "transparent",
    width: 186.47265625,
    height: 141.9765625,
    seed: 1968410350,
    groupIds: [],
  },
];

You might want to use this if you are using some backend to store the excalidraw elements and want to preload excalidraw with those elements.

onChange

Every time component updates, this callback if passed will get triggered and has the below signature.

onChange(ExcalidrawElement[], AppState)

Here you can try saving the data to your backend or local storage for example.

options

These contains the options object with which you can control the initial rendering of Excalidraw. Currently it only contains the below keys, more to be added in future.

Here is how you use it

{ zenModeEnabled: true, viewBackgroundColor: "AFEEEE" }

user

This is the user name which shows during collaboration. Defaults to {name: ''}. This is Object as later more attributes like user cursor colors can also be added.

onUsernameChange

This callback if passed gets triggered whenever username changes and has the below signature

onUserNameChange(username);

Local Installation

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Clone the repo

git clone https://github.com/excalidraw/excalidraw-embed.git

Commands

Contributing

Currently this is a fork of [excalidraw](https://github.com/excalidraw/excalidraw) and all the changes for making it an embedable component are done on top of it. So for any changes, please [open an issue](https://github.com/excalidraw/excalidraw-embed/issues/new) first to discuss what you would like to change.