Create a simple paint app using react-canvas-draw

Adhishreya P — Mon, 08 Mar 2021 13:05:45 +0000

Create a react app and install react-canvas-draw dependency
npm install react-canvas-draw --save

We shall use a functional component to include the CanvasDraw component

This a basic setup where only few props are used. We now have a canvas component where the brush colour ,width has been set.The grid lines have been hidden.

For more props refer https://www.npmjs.com/package/react-canvas-draw

Undo and clear features can be included using reference to the component
Read more about it here Refs and the DOM

ref={(canvasDraw) => (this.modify = canvasDraw)}

Next let's accept user brush size and colour selections.We shall be building a palette from scratch.
You can also try react-colour-palette. A color picker component for React.

Since we are using react hooks in this app we shall begin by importing useState hook from react
import {useState} from 'react'
Read more about hooks What is ReactHooks

First we shall set the initial state of the colour and width of the brush.

canvas is initialized to the value given as an argument to the useState
setBrush is the function used to modify the value of canvas
brush is initialized to value 50
setThick is used to modify the value of brush thickness

The modified ReactCanvas component

So we shall use input element of type color

Whenever the input element changes our brush colour variable canvas changes.As stated earlier we shall be making use of setBrush function to change the colour.

To change the brush thickness

The thickness here shall vary between 2 and 50.
One can further add more features.
The complete code can be found here

Let's write a fun CLI quiz

Adhishreya P — Wed, 09 Dec 2020 06:51:44 +0000

what is require()??

require is a function that allows us to work with modules defined in separate files. If u are familiar with C then require is similar to include.
So the functionality involves reading the specified JavaScript file and returning the export object of the file.

var code=require('readline-sync')

readline-sync
Basically, it allows to have interaction with the user via the console in a synchronous manner.

To get the user input one can use 'question'

var readInput=require('readline-sync');

var input =readInput.question('Helooooo what's ur name?'); //the user's response is stored in the variable 'input'

What is chalk??

It basically a styling library for your terminal. You can also chain multiple styles!!

var chalk=require('chalk')

console.log(chalk.red.italic("we are trying out chalk"))

read more about it here.... Chalk js Documentation

forEach()

A method that allows a function to be executed on every element of the list just as any regular for loop does.

A basic syntax.

array.forEach(function(currentValue, index, arr))

currentValue= the current element being worked on

index = index of the current element

arr=array object the current object belongs to

example

list=[1,2,3,4]

list.forEach((element,index)=>{console.log(index,element)});

The complete code can be found here

DEV Community: Adhishreya P

Create a simple paint app using react-canvas-draw

Let's write a fun CLI quiz

What is chalk??

A basic syntax.