reactdraw

A drawing library in react

view storybook docs/demo here

demo_video_1_cropped.mp4

Installation

npm install @jzohdi/react-draw

yarn add @jzohdi/react-draw

Usage

The example below creates a bare free draw area with no other tools or options. See demo

import { ReactDraw, freeDrawTool } from "@jzohdi/react-draw";

export default function MyComponent() {
  <div>
    <h1>Example page title</h1>
    <ReactDraw
      drawingTools={[freeDrawTool]}
      actionTools={[]}
      hideBottomBar={true}
      hideTopBar={true}
    >
      ... any child you want can go inside the drawing area.
    </ReactDraw>
  </div>;
}

Props

See docs for more info

export type ReactDrawProps = {
  children?: ReactChild;
  layout?: LayoutOption;
  drawingTools: DrawingTools[];
  hideTopBar?: boolean;
  actionTools: ActionTools[];
  hideBottomBar?: boolean;
  shouldKeepHistory?: boolean;
  shouldSelectAfterCreate?: boolean;
  id: string;
  styleComponents?: StyleComponents;
  menuComponents?: MenuComponent[];
};

Contributing

Pull requests or issues are welcome!

Local Development

Local development is done using storybook. After install dependencies:

npm run storybook

After changes are made create dist and docs:

npm run add

License

ISC, see License for details