Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-sketch-canvas
Advanced tools
Readme
This project was generated using DTS.
If you use npm
npm i react-sketch-canvas
or with yarn
yarn add react-sketch-canvas
Common usage example
import * as React from 'react';
import { ReactSketchCanvas } from 'react-sketch-canvas';
const styles = {
border: '0.0625rem solid #9c9c9c',
borderRadius: '0.25rem',
};
const Canvas = () => {
return (
<ReactSketchCanvas
style={styles}
width="600"
height="400"
strokeWidth={4}
strokeColor="red"
/>
);
};
To export Data URL of your sketch use ref
import * as React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";
const styles = {
border: "0.0625rem solid #9c9c9c",
borderRadius: "0.25rem"
};
const Canvas = class extends React.Component {
constructor(props) {
super(props);
this.canvas = React.createRef();
}
render() {
return (
<div>
<ReactSketchCanvas
ref={this.canvas}
strokeWidth={5}
strokeColor="black"
/>
<button
onClick={() => {
this.canvas.current.
.exportImage("png")
.then(data => {
console.log(data);
})
.catch(e => {
console.log(e);
});
}}
>
Get Image
</button>
</div>
);
}
};
Props | Expected datatype | Default value | Description |
---|---|---|---|
width | PropTypes.string | 100% | canvas width (em/rem/px) |
height | PropTypes.string | 100% | canvas width (em/rem/px) |
id | PropTypes.string | "react-sketch-canvas" | ID field to uniquely identify a SVG canvas (Supports multiple canvases in a single page) |
className | PropTypes.string | "" | Class for using with CSS selectors |
strokeColor | PropTypes.string | black | Pen color |
canvasColor | PropTypes.string | white | canvas color (HTML colors) |
backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
exportWithBackgroundImage | PropTypes.bool | false | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check MDN docs |
strokeWidth | PropTypes.number | 4 | Pen stroke size |
eraserWidth | PropTypes.number | 8 | Erase size |
allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
onChange | PropTypes.func | Returns the current sketch path in CanvasPath type on every path change | |
onStroke | PropTypes.func | Returns the the last stroke path and whether it is an eraser stroke on every pointer up event | |
style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
svgStyle | PropTypes.object | {} | Add CSS styling as CSS-in-JS object for the SVG |
withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
Set SVG background using CSS background value
You can specify width and height values in em or rem. It fills the parent element space if width and height are not set
You can export the sketch as an image or as a svg
Use ref to access the element and call the following functions to export image
Props | Expected datatype |
---|---|
eraseMode(boolean) | Switch to eraser mode by passing true. You can switch back to pen mode by passing false |
clearCanvas() | Clears the canvas. |
resetCanvas() | Resets the canvas and clears the undo/redo stack along with it. |
undo() | Undo the last action. |
redo() | Redo the previous action. |
exportImage(imageTypeString) | Accepts an image type as argument (ExportImageType ) and returns a Promise which resolves to base64 data url of the sketch. |
exportSvg() | returns a Promise which resolves to an inline SVG element. |
exportPaths() | returns a Promise which resolves to an instance of CanvasPath . |
loadPaths(CanvasPath) | Accepts an CanvasPath exported from exportPaths() and loads it on the canvas. |
getSketchingTime() | returns a Promise which resolves the time that user sketched in the canvas (considers only when the user made the strokes or erased the strokes) |
type ExportImageType = 'jpeg' | 'png';
interface Point {
x: number;
y: number;
}
interface CanvasPath {
paths: Point[];
strokeWidth: number;
strokeColor: string;
drawMode: boolean;
startTimestamp?: number;
endTimestamp?: number;
}
FAQs
react-sketch-canvas - Freehand vector drawing tool for React using SVG as canvas
The npm package react-sketch-canvas receives a total of 5,177 weekly downloads. As such, react-sketch-canvas popularity was classified as popular.
We found that react-sketch-canvas demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.