Do you want to do something cooler than the usual text-decoration? Let’s animate them together with React Rough Notation!

Have you noticed that the trend in landing pages is to have some text underlined? Yeah, me too! Do you think it’s not cool enough for your website? Yeah, me too!

So when I came across Rought Notation, I was really happy because it’s a kind of a light library that allows you to do really cool stuff. But what’s Rought Notation?

A small JavaScript library to create and animate annotations on a web page

Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

(From the Rough Notation doc)

Rough Notation allow you to do better than just highlight for multiple reasons. The first one being, it’s animated. Another reason is that it does not just hight light!

My repository on Github will be available here if you want to take a look.

Rough Notation is really straight forward to use. As you know, Gatsby is a modern site generator for React. So, we’ll have to use the React version of Rough Notation.

So let’s install it :

npm install --save react-rough-notation

Starting with the most basic, we are going to display a text and highlight a couple of words

#javascript #gatsbyjs #react #technology #programming #gatsby