Animated Handwriting Text in React with Vara.js

Introduction

Hey guys, have you been looking for an animation library that can animate the text by the stroke? If so, you are at the right place. Let’s see how we can create an animated handwriting text in ReactJs like the image below with the Vara library.

You can visit WiseCode Blog for full reference on how to create animated handwriting text in React.

How to use Vara to draw Animated Handwriting Text

Before using the Vara library, we will have to install it with the command npm install vara. If you are using TypeScript, remember to install its type by npm install -D @types/vara.

Let’s create a new file called VaraText.tsx (or VaraText.jsx if you are using JavaScript) inside src/components/.

Then, we will create a component called VaraText as follow:

function VaraText({ text }: { text: string }) {
  useEffect(() => {
    var vara = new Vara(
      "#vara-container",
      "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
      [
        {
          text: text,
          fontSize: 40,
          strokeWidth: 0.7,
        },
      ]
    );
  }, []);

  return <div id="vara-container" className="z-[20]"></div>;
}

I will explain line-by-line from the code above.

First of all we define a function called VaraText with one argument text which is the text we want to write out.

Then, inside the useEffect hook we will create a new Vara component.

The first parameter will be the id of the div tag that we will draw the text.

The second parameter will be the JSON file of the font being used. There are four pre-made fonts from the author. You can choose any of them for your text. Remember to insert the URL of the raw font file.

The third parameter is a list containing different texts you want to show. You can add more text like this:

var vara = new Vara(
  "#vara-container",
  "https://raw.githubusercontent.com/akzhy/Vara/master/fonts/Satisfy/SatisfySL.json",
  [
    {
      text: text,
      fontSize: 40,
      strokeWidth: 0.7,
    },
    {
      text: "Some text",
    },
    {
      text: "Some more text"
    }
  ]
);

After creating the VaraText component, you can go anywhere on your page to add it into. For example, let’s modify the index.tsx inside src/pages to see if it works.

import VaraText from "@/components/VaraText";

export default function Home() {
  return (
    <div>
      <VaraText text='WiseCode Team' />
    </div>
  );
}

This code will output the text “WiseCode Team” as we can see from the Introduction section.

Conclusion

That’s all for this tutorial. We have been using Vara to draw beautiful animated calligraphy text in React.

For more customization, please visit the Vara project homepage to learn how to adjust the animation and all other properties of the text.

Happy coding!