https://github.com/satyam-2001/react-arts
It is a library of react functional component which provides canvas sketch board in the application.
https://github.com/satyam-2001/react-arts
art canvas drawingboard npm package react sketch
Last synced: about 2 months ago
JSON representation
It is a library of react functional component which provides canvas sketch board in the application.
- Host: GitHub
- URL: https://github.com/satyam-2001/react-arts
- Owner: Satyam-2001
- Created: 2022-06-04T12:22:16.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-15T10:35:35.000Z (almost 2 years ago)
- Last Synced: 2025-01-14T00:35:36.309Z (3 months ago)
- Topics: art, canvas, drawingboard, npm, package, react, sketch
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-arts
- Size: 1.8 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 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:
```shell
npm install react-arts
```
# CanvasSketch
`CanvasSketch` component appends simple canvas where a user can sketch using mouse or touch behaviour on screen.
```javascript
import './App.css';
import { CanvasSketch } from 'react-arts';
function App() {
const [clearCanvas, setClearCanvas] = useState()
return (
Clear Frame
);
}
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`.
```javascript
import './App.css';
import { CanvasSketchTool } from 'react-arts';
function App() {
return (
);
}
export default App;
```
## API
| Name | Type | Required | Default | Description |
| -------------- | -------------- | -------- | ------- | ----------------- |
| height | Number | true | - | Height of canvas
| width | Number | true | - | Width of canvas
# Author
