react-arts

0.0.3 • Public • Published

🎨 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

Package Sidebar

Install

npm i react-arts

Weekly Downloads

1

Version

0.0.3

License

MIT

Unpacked Size

34.5 kB

Total Files

5

Last publish

Collaborators

  • satyam2001