? 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

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