Animated Handwriting Text in React with Vara.js
Tags: react, animation, text, tutorial
Published: 2023-04-29 17:06:44

## 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 React like the image below with the [Vara](https://github.com/akzhy/Vara) library.

![Vara.js Text: WiseCode Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npz0ks6oavkkpqpv76bx.gif)

> You can visit [my website](https://dminhvu.com) for full reference on [how to create animated handwriting text in React](https://dminhvu.com/react-vara-animated-handwriting-text).

## Prerequisites

Before using the Vara library, we will have to install it. Using a simple command `npm install vara` to install Vara.js. 

> If you are using TypeScript, remember to install its type by `npm install -D @types/vara`.

## Using Vara.js to Create Animated Handwriting Text in React

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:

```ts
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 React component 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. This component will be rendered in a `div` that we will define later.

The first parameter will be the `id` of the `div` tag, which was mentioned above, that we will draw out the text.

The second parameter will be the JSON file of the font being used. There are [four pre-made fonts](https://github.com/akzhy/Vara/tree/master/fonts) from the Vara's author. You can choose any of them for your text, in this case, I will pick SatisfySL.

> Remember to insert the URL of the raw font file on GitHub, which starts with "https://raw.githubusercontent...".

The third parameter is a list containing different texts you want to show. Each text will have various properties for you to customize such as `fontSize`, `strokeWidth`, `speed`, and more.

You can add more text like this:

```ts
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",
      fontSize: 26,
    },
    {
      text: "Some more text"
    }
  ]
);
```

After creating the `VaraText` component, you can go anywhere on your page to create an animated handwriting text component. For example, let's modify the `index.tsx` inside `src/pages` to see how it works.

```ts
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 create beautiful animated handwriting text in React. 

For more customization, please visit the [Vara project homepage](https://vara.akzhy.com/) to learn how to adjust the animation and all other properties of the text.

Happy coding!