Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
SVG drawing in React JS frontend
In this article, we will see how to create an interface on which a user can create drawings, write names, and pretty much any artistic work. You can use this feature to allow users to sign on a page. Here we will use the "react-hooks-svgdrawing" package.
First create a React project −
npx create-react-app tutorialpurpose
Go to the project directory −
cd tutorialpurpose
Example
Install the react-hooks-svgdrawing package −
npm i --save react-hooks-svgdrawing
This library will be used to implement the container which will allow us to make a drawing or anything in the form of SVG using mouse or touchpad.
Add the following lines of code in App.js −
import React, { useCallback } from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";
export default function App() {
const [renderRef, draw] = useSvgDrawing({
penWidth: 10, // pen width
penColor: "#e00", // pen color
close: false, // Use close command for path. Default is false.
curve: true, // Use curve command for path. Default is true.
delay: 60, // Set how many ms to draw points every.
fill: "none", // Set fill attribute for path. default is `none`
});
const handleDownload = useCallback(() => {
draw.download(); // default svg download
draw.download({ extension: "svg", filename: "a.svg" });
draw.download({ extension: "png", filename: "b.png" });
draw.download({ extension: "jpg", filename: "c.jpg" });
}, [draw.download]);
const handleChangeParameter = useCallback(() => {
// Change pen config draw.changePenColor("#00b");
// Change pen width draw.changePenWidth(10);
// Change fill attribure of svg path element. draw.changFill("#00b");
// Change throttle delay of drawing draw.changeDelay(10);
// Set whether to use curved comma for svg path element. draw.changCurve(false);
// Set whether to use curved comma for svg path element. draw.changeClose(true);
}, [draw]);
return (
<div>
<div
style={{ width: 500, height: 500, border: "1px solid black" }}
ref={renderRef} />
<button onClick={draw.clear}>clear</button>
<button onClick={draw.undo}>undo</button>
<button onClick={handleDownload}>download</button>
</div>
);
}Explanation
useSvgDrawing takes two arguments
one is a reference, which is assigned to any element to make an area or element drawable, and
the second argument is draw, which usually handles every setting like pen width, pen color, downloading the drawing, undo, clear, etc.
Output
Now, let's check the output −
980 Views
