? React Arts

React Arts is a library of react functional component which provides canvas sketch board in the app.

This library contains two react component CanvasSketch and CanvasSketchTool

LIVE DEMO

react_arts

Installation

This module is installed via npm:

npm install react-arts

CanvasSketch

CanvasSketch component appends simple canvas where a user can sketch using mouse or touch behaviour on screen.

import './App.css';
import { CanvasSketch } from 'react-arts';

function App() {

  const [clearCanvas, setClearCanvas] = useState()

  return (
    <div className="App">
      <CanvasSketch 
        height={450} 
        width={750}
        getClearCanvas = {setClearCanvas}
    />
    <button onClick={clearCanvas}>Clear Frame</button>
    </div>
  );
}

export default App;

API

Name Type Required Default Description
height Number true – Height of canvas
width Number true – Width of canvas
color String false black Color for sketch
lineWidth Number false 4 Width of the pen
lineCap String false round Shape of pen for sketch
option String false pen Option for sketch [pen / paint]
getClearCanvas Function false – Returs clearCanvas function to setState

CanvasSketchTool

CanvasSketchTool component is advance version of CanvasSketch which also comes with a tool kit to change and use properties like color, erase, line width, clear canvas, floodfill.

import './App.css';
import { CanvasSketchTool } from 'react-arts';

function App() {

  return (
    <div className="App">
      <CanvasSketchTool
        height={450} 
        width={750} 
    />
    </div>
  );
}

export default App;

API

Name Type Required Default Description
height Number true – Height of canvas
width Number true – Width of canvas

Author

Satyam Lohiya

GitHub

View Github