Top React Hooks — Select and SVG Canvas

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

React Hooks Lib

React Hooks Lib is a library that has many reusable React hooks.

To install it, we can run:

npm i react-hooks-lib --save

Then we can use the hooks that come with the library.

We can use the useField prop to bind the selected value to a state.

For instance, we can write:

import React from "react";
import { useField } from "react-hooks-lib";

export default function App() {
  const { value, bind } = useField("apple");

  return (
    <div>
      <select {...bind}>
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="grape">grape</option>
      </select>
      <p>{value}</p>
    </div>
  );
}

We have the useField hook with the initial value for the select element.

bind is an object with the value and onChange handlers to automatically bind to the select box.

value has the value selected from the dropdown.

It comes with many other hooks for manipulating other kinds of states like arrays and also watches for DOM element changes.

Also, it has hooks to imitate the lifecycle methods of React class components.

react-hooks-svgdrawing

The react-hooks-svgdrawing library lets us create a drawing area in our app easily.

We can install it by running:

yarn add react react-hooks-svgdrawing

Then we can use it by writing:

import React from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";

export default function App() {
  const [renderRef, draw] = useSvgDrawing();
  return <div style={{ width: 500, height: 500 }} ref={renderRef} />;
}

Then renderRef is passed into the div as the ref prop’s value to make the div a drawing area.

The hook can take an object with various options.

For instance, we can write:

import React from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";

export default function App() {
  const [renderRef, draw] = useSvgDrawing({
    penWidth: 10,
    penColor: "red",
    close: true,
    curve: false,
    delay: 60,
    fill: ""
  });
  return <div style={{ width: 500, height: 500 }} ref={renderRef} />;
}

penWidth has the pen’s width.

penColor has the pen’s color.

close set to true means the drawing path will be closed.

curve use the curve command for the path.

delay is the number of milliseconds to wait before drawing a point.

fill has the fill of the path.

It comes with various methods we can use.

They’re part of the draw method.

For example, we can write:

import React from "react";
import { useSvgDrawing } from "react-hooks-svgdrawing";

export default function App() {
  const [renderRef, draw] = useSvgDrawing();
  return (
    <>
      <button onClick={() => draw.download("png")}>download</button>
      <button onClick={() => draw.undo()}>undo</button>
      <button onClick={() => draw.changePenColor("red")}>changePenColor</button>
      <button onClick={() => draw.changePenWidth(10)}>changePenWidth</button>
      <button onClick={() => draw.changeFill("green")}>changeFill</button>
      <button onClick={() => draw.changeDelay(10)}>changeDelay</button>
      <button onClick={() => draw.changeCurve(false)}>changeCurve</button>
      <button onClick={() => draw.changeClose(true)}>changeClose</button>
      <div style={{ width: 500, height: 500 }} ref={renderRef} />
    </>
  );
}

to call various methods of draw .

download downloads the drawing with the given format.

undo undoes the last change.

changePenColor changes the pen color.

changePenWidth changes the pen width.

changeFill changes the fill of the pen.

changeDelay changes the delay of drawing the dots.

changeCurve set whether to use a curved comma for the SVG path element.

chnageClose set whether to close a path.

We can use the getSvgXML method to get the SVG code.

Conclusion

React Hooks Lib has the useField and many other useful hooks.

react-hooks-svgdrawing provides us with a drawing area that is configurable.

We can download the drawing and get the SVG code from it.