How to create a signature pad in React

How to create a signature pad in React

Learn how to build a signature pad for your forms in React.

I was recently asked by a client to build a form that allows users to sign using a wireless pen mouse. The goal of the client was to obtain user signatures for a report that would be used for a future audit.

At first I was considering building my own signature pad from scratch. However, I didn't have the time to do that. This feature needed to be live in a week. This unfortunately is the reality when working in real life situations. This is why I wanted to write about this specific case. You won't always have the time to build every single feature in an app from scratch. Sometimes you have to rely on libraries created by other developers. This article will help beginners see how you can combine different libraries to create a working product.

OK let start building the signature pad. First I wrote a user story. Below is the user story for what we will be building:

  • User sees a button that can be clicked to open a popup
  • User can see and draw on a canvas when the popup is opened
  • User has the option to exit popup via an 'Close' button, clear the canvas via a 'Clear' button, or save the signature as an image via the 'Save' button.

Now that we know what we are building lets start coding it. We can use the user story list items as our milestones.

User sees a button that can be clicked to open a popup

I will use React for this task, so lets bootstrap the project by using create-react-app.

To do that all we need to do is type the following command on our terminal:

npx create-react-app signature-pad

For more information on create-react-app check out this Github Repo

Once our project is ready, we navigate into our folder and start up our code editor. In my case I am using VS Code.

# navigate to the project folder in your terminal
cd signature-pad
command to start VS Code once you are in root folder of the project

code .

Now that we have everything set lets start up our project by typing the following command:

# start project
npm start

This is what we should see once the project starts:

If you open up your App.js file this is what we should see:

Lets get rid of all this code and add the one thing we need. A button that when clicked should open up a popup with a signature pad, per our user story.

This is what our app should look like now:

Our final step for this part of the project is to show a popup when the button is clicked. A good library that can help with this is reactjs-popup. To install it we type

npm install --save reactjs-popup

This library can be used to create Popup Models, Tool-tips, and Nested Menus. In our case we will focus on using it to create Popup Models. For more information on it check out their very helpful documentation page

Once we have the library installed we import it into our App.js file. Next we add the Popup component to our render method. This component takes in many props. In our case we focus on two: modal props (by default this is false which results in getting a tool-tip) and the trigger props which takes in a component that will trigger the popup. In our case this is our button that we already created.

Now when we click on the button we should get a popup. the content of the popup will go inside our Popup component.

This is what we should have now:

We have successfully completed the first part of our User story. Now lets more to the next one!

User can see and draw on a canvas when the popup is opened

To build the canvas inside our popup we will be using react-signature-canvas. This is a powerful library that will make working with a signature pad very easy. Specifically when we start thinking about adding features such as clear and save to our pad.

To install it we type:

npm install --save react-signature-canvas

Once we have that installed we import the SignatureCanvas component and place it inside our Popup component. That is all!

We now have a canvas inside our popup. This is what the code looks like:

and this is what our app should be showing:

Before we move to the next item in the user story lets add some styling to our canvas. All I will do is give give our canvas a border in order for us to easily identify it and give it a width and height.

the SignaturePad component has a prop called canvasProps which allows us to pass attributes to the canvas. In this case I will give the canvas a class called "signatureCanvas".

You probably noticed that I am also importing a css file called sigCanvas.css. This is where I will put all my canvas related styles.

The result should look like this:

OK ready for our final step.

User has the option to exit popup via an 'Close' button, clear the canvas via a 'Clear' button, or save the signature as an image via the 'Save' button.

lets start with the close button. lets add a button with an onClick, inside that onClick will be a way to close the popup. The reactjs-popup docs recommend providing a function as a child to the Popup component. this function has a parameter close that will handle our close event and will return the components that we want inside the popup.

In addition we should not allow users to close the popup except via this button. To do that we need to pass the closeOnDocumentClick prop and pass it a true value.

This is what our app looks like now:

Next we need a button to clear the canvas. react-signature-canvas provides several methods that help with manipulating our canvas. In order to use this method we need to get an instant of our canvas. This can be done via React refs.

Let use React Hooks for this. First we create a ref called sigCanvas using useRef hook, the initial value is an empty object. Next we pass this into a SignaturePad component using a prop called ref. finally we create a function called clear that will be called anytime the clear button is clicked.

inside the clear function, we simply invoke the method clear() via our canvas ref sigCanvas. I realize these are a lot of steps, so I wrote comments in the code shown below:

This is what our app should look like now:

Now for the final button, the save button. This button should simply output a base64 string representing the image. You can use this to store it in a database or instead you can upload the image into your server. In our case we won't be connecting to any servers, so we will simply log the base64 code to the console.

react-signature-canvas has a method called getTrimmedCanvas() that can trim the white space from the canvas (to optimize the image) and give back a base64 string representing the image. All this via our sigCanvas ref.

This is what our app should look like now:

Alright! all basic functionalities are complete!

I do want to add one more part to this project. Lets output the saved signature on our screen instead of just logging it.

We can simply add an image tag below our popup button and pass it our image URL. Of course this image URL will be what we logged into the console, so instead of doing that we can store it in state.

This should be the result:

That's all folks! we successfully completed our user story. Of course there is room to improve but all the basic functionalities are there.

You can play around with the code and add more features to it by following the link

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

Further reading

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ Best 50 React Interview Questions for Frontend Developers in 2019

Originally published on dev.to

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

React native developer | React Native App Development Services - Netset Software

[Netset Software Solutions] (https://www.netsetsoftware.com "Netset Software Solutions") offers React Native app development services for Android and iOS. Hire react native developers to build high-quality mobile apps.Contact Now !!

[Netset Software Solutions] (https://www.netsetsoftware.com "Netset Software Solutions") offers React Native app development services for Android and iOS. Hire react native developers to build high-quality mobile apps.Contact Now !!

Hire dedicated full-stack React native developers for custom React native application

Hire dedicated full-stack React native developers for custom React native application

The brilliant technology some of the most innovative apps like UberEars, Instagram, Airbnb is something you must have heard about. Well, React Native is the one which is the technology behind it. It has been chosen by some of the most trusted and...

The brilliant technology some of the most innovative apps like UberEars, Instagram, Airbnb is something you must have heard about. Well, React Native is the one which is the technology behind it. It has been chosen by some of the most trusted and popular brands all over the world for their mobile app development. Now, every React Native app development company providing their services to React Native development to a plethora of clients, thanks to the humungous popularity of this technology.

Hence, if you are thinking to go ahead with React Native app development, there exist few aspects to consider. For the purpose of your next mobile app development project, as well as choosing React Native development, you must know the need to hire React Native developer and how to successfully and effectively do it. However, hiring such developers for the purpose of custom React Native app development is quite a difficult job. But, let’s have a brief discussion on this highly-advanced technology.

React Native

To be clear and concise, it is essentially a JavaScript-based framework which was actually created by the social media giant, Facebook. It provides a mobile app development company with the ability to develop native apps in JavaScript. The company came up with this framework as Mark Zuckerberg, Facebook CEO, accepted that relying too much in case of mobile app development on the HTML was a mistake. They developed this framework for their app’s UI and then even went further to make it open source.

React Native applications have a modular architecture and are much more stable. It essentially allows the developer with improved coding and offers pre-loaded elements. Also, it is well-suited for the purpose of cross-platform development since it offers stability as well as budget-friendly solutions that have much better as well as optimal performance.

How to Hire Dedicated Fullstack React Native Developer

In order to hire a dedicated full-stack react native developer, you should check the following aspects and qualities in the candidate. Some of them are:

1. Comprehensive Knowledge of JavaScript with Relevant Expertise

Being an evident fact that JavaScript is the soul of React Native, it is essentially the language this technology is based on. So, React Native app developers need to have quite a comprehensive knowledge of JavaScript and relevant expertise in JavaScript in order to develop and build different components as well as an entire application. Ask questions concerning technical aspects of JavaScript, and it will help you gauge the capabilities of the developers, especially whether they are well-versed with this language or not.

2. Specific Experience in Native iOS and Android Development

Of course, there are situations where the react native developer has to work with different native tools. Hence, if he or she is familiar and in the best-case scenario, experience with native iOS and Android development, then it will certainly an additional benefit. So, hire React Native developer who actually has been involved in these developments in his or her previous projects. He should also have experience in Microsoft application development.

3. Backend Skills Expertise

In case you want to custom code the complete mobile app backend, you have to finalize a certain backend programming language at the start. This will offer you with clarity of the entire process of how to hire React Native developers. Think, you want to develop the mobile app backend using Python. So, the developer has to be knowledgeable in core Python language as well as any of its popular frameworks like Django along with development/customization of RESTful APIs, and finally, object-relational mappers (ORM) and the database with frontend skills like CSS or even HTML.

4. Impressive Debugging Skills

For every development process, there is an associated mandatory process of detection along with fixing of bugs and errors in the code. Hence, ensure that the React Native developer you hire has the inherent capability of resolving these issues.

5. Seamless Communication Skills

For a React Native developer, it is essential to have strong communication skills. A mobile app development company should go with the developer who is well-versed with the technology as well as has impressive and seamless communication skills. A developer who has impressive amazing skills easily adds more value to the mobile app development project. Also, it assists in communicating the project progress with the clients and regularly informing them about the different project development aspects.

Conclusion

Mobile apps have certainly become an essential and integral part of people’s daily lives. Hence, it has increased the demand for these apps, and mobile app development services look for frameworks that assist in the development of robust mobile apps. Pertaining to this, React Native has emerged as the best framework for not only iOS but also Android app development. React Native app development has grown proportionally higher than any other framework based development due to easier access to plugins and libraries which assist in entirely soothing and streamlining the entire mobile app development phase. However, to achieve this, a company needs to hire React Native developers who have the above-mentioned qualities and skills.

Learn React.js: Front-End Web Development for Beginners

Learn React.js: Front-End Web Development for Beginners

Learn React.js - Frontend Web Development for Beginners. In this React tutorial, you will learn the core fundamentals of React JS and Modern JavaScript so that you can start building lightning fast web apps using React JS. Learn Modern JavaScript and React JS from absolute scratch. Learn to make AJAX requests to get data from remote API and display into your web application. Learn React JS, which is one of the most exciting technology of recent time

Learn React.js - Frontend Web Development for Beginners - Web Development in 2019. In this video you will learn the core fundamentals of React JS and Modern JavaScript so that you can start building lightning fast web apps using React JS.

In this video, you will learn Modern JavaScript and React JS from absolute scratch. you will learn to make AJAX requests to get data from remote API and display into your web application.

So if you are ready to learn React JS, which is one of the most exciting technology of recent time

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading

React - The Complete Guide (incl Hooks, React Router, Redux)

**☞ **Modern React with Redux [2019 Update]

**☞ **50+ Java Interview Questions for Programmers

**☞ **Top 100 Python Interview Questions and Answers

**☞ **100+ Basic Machine Learning Interview Questions and Answers

**☞ **Introduction to Java String Interview Questions and Answers

**☞ **Best 50 React Interview Questions and Answers in 2019

**☞ **Top 50+ SQL Interview Questions and Answers in 2019

**☞ **Best Java Microservices Interview Questions In 2019

**☞ **Best 50 Nodejs interview questions from Beginners to Advanced in 2019

**☞ **100+ Java Interview Questions and Answers In 2019