How to add husky to React

This article is based on Husky v8.0.1 and React v18.2.0.

Husky makes modern native Git hooks easy to use in your React project. You can use it to lint your commit messages, run tests, lint code, or many more when you commit or push.

But what are Git hooks and how can you add husky to your project?

What are Git hooks?

Git hooks are scripts/programs that you can set up to run at certain points in git's execution (git lifecycle). These points include different stages of a commit, like before a commit (pre-commit) or after a commit (post-commit).

Git hooks allow developers to enforce standards by automating other scripts to run those tasks, like run npm test before a commit, or run eslint to avoid eslint errors and warnings.

Husky supports all Git hooks. You can find a list with all available Git hooks here.

Add husky to your React project

There are two ways to install husky in your project:

• Automatic (recommended)
• Manual

Automatic installation (recommended)

The package husky-init is used to quickly install and initialize a project with husky.

From your project root, type the following commands (depending on your package manager) to install husky.

Important: If your package.json is in a subdirectory, see how to set up a custom directory with husky.

npx husky-init && npm install # npm
npx husky-init && yarn # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+

After successful execution of this script several things did happen:

• A folder named .husky in your project root has been added. It contains a file called pre-commit, which is the initial pre-commit hook. And a folder _ which contains the automatically generated shell script for husky. (Do not commit this, see .gitignore)
• The package.json was modified, with a prepare script and husky was added as a devDependency.
• And your package-lock.json was updated.

That's it, you are ready to use husky in your React project. 😀

Manually installation

Three steps, though the outcome should be the same as with automatic installation.

1. Install husky

npm install husky --save-dev

1. Enable Git hooks

npx husky install

1. To automatically have Git hooks enabled after install, edit package.json

npm pkg set scripts.prepare="husky install"

Using hooks

After a successful installation you should already have a pre-commit hook installed.

The content of the generated pre-commit hook are:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm test

This means that before every commit, the script npm test is running. If the tests fail, you will get an error and, you can`t commit, unless you fix the tests. I think you see already how useful this can be in any size of project.

Create a hook

The syntax to add a command to a hook or to create a new hook is:


husky add <file> [cmd]


For example, you want to run ng lint after npm test in your pre-commit hook.


husky add .husky/pre-commit ng lint


The pre-commit hook has been updated:

`

!/usr/bin/env sh

. "$(dirname -- "$0")/_/husky.sh"

npm test
ng lint
`

🌟Congratulations🌟You have husky successfully installed and setup husky in your React project.

TL;DR

• Husky is a tool to use git hooks easily to automatically run scripts on git lifecycle events.
• For example: If you want to run a npm script, before code is committed use a pre-commit hook.

Thanks for reading and if you have any questions , use the comment function or send me a message @mariokandut. If you want to know more about React, have a look at these React Tutorials.

References (and Big thanks):Git hooks,React,Husky,NPM - husky