🎨 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

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