Dotting: Flexible Pixel Art Editor for React

Dotting is a Pixel art drawing component for React developers who want to implement a pixel canvas editor in their websites.

Why Dotting?

1. Dotting works for both PC 💻 and mobile 📱 environments.

2. You can freely pan & zoom around the using your mouse🖱 or your fingers👌.

3. You can extend your canvas grid to any size⬆️⬅️⬇️➡️.

Documentation

Quick Start

Step1. Install the package

$ yarn add dotting

Step2. Place Dotting component in your project

import { Dotting } from "dotting";

const Clear = () => {
  return (
    <div>
      <Dotting width={300} height={300} />
    </div>
  );
};

Component Props

When creating a Dotting component there are multiple props prepared for easily customizing the canvas. Especially, you can set the brush you would like to use through the brushTool prop. The width and height props should be initialized with your own values.

If you would like to use the hooks for further customizing the component, you must use the ref prop and assign a refObject created with useRef<DottingRef>. An example of how to use hooks by setting a refObject is shown below.

Basic Types

There are some types that you should take notice of when using hooks or setting props for Dotting. In this section, I only cover the types that are related to Dotting props. For further details on specific types used in hooks, please check the documentation

Don't forget setting the width and height!

To use the canvas component, you should first use the <Dotting/> component. You must set the width and height to use it.

<Dotting width={300} height={300} />

Want to manipulate the canvas? Use hooks!

To manipulate the pixel grids programatically, you can use hooks. The provided hooks are useBrush, useData, useDotting, useGrids, useHandlers. For using the hooks, you must create a ref object with React's useRef and input the resulting ref object as a prop in the Dotting component and also pass it as a parameter to the hooks. Below is an example using the useDotting hook for clearing the pixels when button is clicked

import { Dotting, DottingRef, useDotting } from "dotting";

export const Component = () => {
  const ref = useRef<DottingRef>(null);
  const { clear } = useDotting(ref);
  return (
    <div>
      <Dotting ref={ref} width={300} height={300} />
      <button onClick={clear}>Clear Canvas</button>
    </div>
  );
};

For more details on how to use hooks, please check the documentation

For contributing

Dotting welcomes contributors! If you are interested, contact me through twitter!

Contributors ✨

Thanks goes to these incredible people!!