How to add husky to React
Tags: react, cleancode
Published: 2023-10-04 09:36:13

---
title: How to add husky to React
published: true
date: 2023-09-20 00:00:00 UTC
tags: react, cleancode
canonical_url: https://www.mariokandut.com/how-to-add-husky-to-react/
---

> This article is based on [Husky v8.0.1](https://github.com/typicode/husky/releases/tag/v8.0.1) and [React v18.2.0](https://react.dev/reference/react).

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?

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#what-are-git-hooks)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](https://git-scm.com/docs/githooks).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#add-husky-to-your-react-project)Add husky to your React project

There are two ways to install husky in your project:

- Automatic (recommended)
- Manual

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#automatic-installation-recommended)Automatic installation (recommended)

The package [husky-init](https://www.npmjs.com/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](https://typicode.github.io/husky/#/?id=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. 😀

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#manually-installation)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"
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#using-hooks)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.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#create-a-hook)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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)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](https://www.twitter.com/mariokandut)**. If you want to know more about **[React](https://www.mariokandut.com/tags/react)**, have a look at these [React Tutorials](https://www.mariokandut.com/tags/react).

**References (and Big thanks):**[Git hooks](https://git-scm.com/docs/githooks),[React](https://react.dev/reference/react),[Husky](https://typicode.github.io/husky/#/),[NPM - husky](https://www.npmjs.com/package/husky)