Course Introduction

Environment Setup With nvm

Scaffolding a React Hook Library with npm init

Building a Skeleton create-react-app to Test the Hook

Building Title Looping Functionality with the useEffect Hook

Packaging react-use-please-stay as an npm Module using Rollup

Cleaning Up and Refactoring react-use-please-stay

In this module, you'll focus on scaffolding all the tooling, building, and an example app to test your hook.

Building the First Functionalities of the react-use-please-stay Hook

Implementing a Cascading Letter Functionality

Implementing a Marquee Functionality

Implementing Favicon Modification Functionality

Add Interval Time as a Hook Parameter

Add Should Always Play as a Hook Parameter

In this module, you'll build more complex functionalities like changing the document title in advanced ways and even altering the favicon.

Adding Advanced Functionalities to react-use-please-stay

Use Custom Types to Type the Hook Parameters

Adding a Development-only Warning Logger

Prevent Concurrent Usages of the Hook

Restore Original Values on Refocus and Unmount

Publish the Hook to npm

In this module, you'll go through some optimizations and improvements to make a truly state-of-the-art React Hook package, and publish it to npm.

Finishing Touches and Optimizations

Prepare the Example App as a Public Example Page

Publish the Example App to GitHub Pages

In this module, you'll publish the example app to double as a live example of the hook running, as well as a complete documentation site.

Finalizing and Publishing the Example App

In **Master Custom React Hooks with TypeScript**, you will learn everything you need to start — completely from scratch — to publishing a fully-fledged React Hook built with Typescript, including a variety of complex features, detailed documentation, and a fully interactive example site. The course spans **4 modules** with a total of **19 lessons** and **over 2 hours of video content**. Here's a preview of what you'll learn in each module:

After completing Craft a Custom React Hook npm Package with React and TypeScript, students now possess the skills to build amazing React Hooks with React and TypeScript.

What the Students are Saying

react

typescript

Organize and abstract away complexity with React Hooks.

19 Video Lessons on React and TypeScript

Interactive, Live Project Demos

Complete Project Source Code

### Master the Art of Building Advanced React Hooks with TypeScript

Welcome to "Master Custom React Hooks with TypeScript," a comprehensive online course designed to elevate your skills in React development, more preciesly in creating Custom React Hooks with TypeScript. Led by seasoned software engineer Chris Frewin, this course dives into the intricacies of building custom and open-source React Hooks using TypeScript.

### Why React Hooks are Such a Pain to Learn

Learning React Hooks can be a formidable journey, especially for seasoned engineers venturing into new territories. Add TypeScript to the mix and the challenge becomes even greater. Here are common challenges you may have encountered:

- The official React documentation is infamous for its lack of complex examples, and it's even harder to find production-ready examples using both React and TypeScript combined. 
- The intricacies of React Hooks and TypeScript may seem daunting, leading to a sense of overwhelm as you navigate through the complexities of these technologies.
- Integrating TypeScript seamlessly with React and understanding how to leverage it effectively can be a puzzle, causing frustration for those aiming to build robust applications.
- Mastering state management with React Hooks requires a deep understanding of React fundamentals. Many face challenges in effectively utilizing useState, useEffect, and other hooks for optimal application performance. One of these most famous pitfalls is the infinite re-render loop that can occur when using useEffect.

### How This Course Helps

This course addresses these frustrations head-on, providing you with practical lessons filled with code implementations based on real-world experience to navigate the complexities of React Hooks and TypeScript with confidence.

### Why Invest Your Time in React Hooks and TypeScript Now?

In the dynamic landscape of software development, staying current is crucial. Here's why learning React Hooks and TypeScript is not just beneficial but essential for software engineers like yourself:

1. **React with React Hooks and TypeScript reigns as the Gold Standard of Web Development:** Even today, React is still oen of the most popular JavaScript frontend framework. By mastering React Hooks and TypeScript, you position yourself at the forefront of modern web development, ensuring your skill set aligns with the latest industry standards.

2. **Enhanced Developer Productivity:** TypeScript's static typing and React's declarative approach can significantly boost your productivity, allowing you to catch errors early and streamline your development workflow.

3. **Industry Demand:** Employers increasingly seek developers well-versed in React Hooks and TypeScript. Adding these skills to your arsenal makes you a sought-after professional in today's competitive job market.

4. **Optimized Application Performance:** React Hooks provide a more efficient and scalable way to manage state and side effects, contributing to the creation of high-performance applications that meet user expectations.

5. **Community Support and Resources:** The React and TypeScript communities are thriving. Learning these technologies now means tapping into a vast pool of resources, support forums, and collaborative opportunities.

Investing your time in mastering React Hooks and TypeScript not only equips you with cutting-edge skills but also positions you for success in the ever-evolving field of software development allowing you to join the ranks of forward-thinking developers embracing these technologies.

### Course Content Overview
Course Overview: Total Modules: **4** Total Lessons: **19** Total Video Runtime: **2 hours, 19 minutes**

Build Powerful React Hooks with TypeScript

Learn how to build an advanced React Hook with TypeScript, you will start from a blank editor and end with a complete and published open-source npm package.
This course contains 19 lessons, each complete with live coding examples for students to study and build upon. 
By the end of the course, you'll have built an extremely clean React Hook and published it to npm with multiple features, documentation, and a fully interactive example site. Along the way, you'll also learn best practices around using TypeScript with React Hooks.

Master Custom React Hooks with TypeScript

Build a powerful hook that enables complex functionality with just one line in a component of your choice.

Build a React Hook npm package with built-in TypeScript type declarations.

Build an example site that updates the hook's properties in real-time.

How to craft **custom React Hooks using TypeScript**

Importance of the **full lifecycle** (mount, unmount, and more) of React Hooks

How to **integrate TypeScript types** with custom React Hooks

What problems **TypeScript with React Hooks** can solve

How to create a **community-ready** custom React Hook package that is a **joy to use**

How to add basic functionalities including **Title Looping**, **Packaging the Module** using **Roolup**, and **Cleaning Up and Refactoring** just to name a few.

How to add advanced functionalities including the immplementation of **Cascading Letter**, **Marquee**, **Favicon Modification**, **Interval Time as a Hook Parameter**, and **Should Always Plas as Hook Parameter** just to name a few.

 How to implement optimization such as **Custom Types**, **Development-only Warning Logger**, preventing concurent usages of the Hook, restoring origional values on **Refocus** and **Unmount**, and more.

The size of your codebase is already expanding, and you can imagine how cumbersome it will be to continually modify and run your 

 script. Package your code as an npm module so you can use it directly in your example app via 

You will install three packages as dev dependencies:

npm install --save-dev rollup @rollup/plugin-typescript tslib

Next, import the Rollup TypeScript plugin and set up the following configuration:

import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'module',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};

This config tells Rollup to package your 

 file will be the actual source code that is imported when your library is used.

 file when packaging. Finally, you'll need to expose the files you want to package, in this case, 

export { usePleaseStay } from './hooks/usePleaseStay';

You'll also need to allow synthetic default imports for rollup to work, since 

 itself is a synthetic default import. So, add the following to your 

You also need to add a type declaration so TypeScript won't complain when you use it in your example project:

You also need to ensure that Rollup, by way of TypeScript, will only be building your 

{
  "compilerOptions": {
    // ...
  },
  "include": ["src"],
  "exclude": ["example"]
}

 is about to become an npm module, you need to inform npm of this within 

Try packaging your hook with your new build command:

You should get some output that looks like this:

 folder. You should see the following files and folders:

.
├── hooks
│   ├── useInterval.d.ts
│   └── usePleaseStay.d.ts
├── index.d.ts
├── index.js
└── index.js.map

, you have to modify a few properties in 

. First, since this is a module with types, thanks to rollup's type declaration, you should also specify the 

 property. This tells npm all relevant files needed for your package. In your case, it's the 

 folder where Rollup placed all your packaged files. However, npm expects this to be an array, so be sure to pass it as 

"types": "dist/index.d.ts",
"files": ["dist"]

Before you can use this linked package in your example app, you need to be sure to link to a single version of React. In your case, the version of React that is used in the 

 folder, so that React does not complain about finding two versions of React in your project. (Note that you 

 have two versions: the one in your root folder, but also the one used by the example app in the 

 folder.) Note that even if the actual semantic version is identical, React will still complain about seeing two locations. You can use 

 to use the example version's React. Still inside the 

To double-check that the link worked, you can issue:

npm ls --location=global --depth=0 --link=true

You may have more, but should at least have these two entries:

/path/to/your/nvm/.nvm/versions/node/v16.18.1/lib
├── react-use-please-stay@1.0.0 -> ./path/to/your/project/react-use-please-stay-course
└── react@18.2.0 -> ./path/to/your/project/example/node_modules/react

 is where your nvm install lives (typically the root) and 

 is where you have decided to place your 

 folder, you can import it directly from the linked package:

import React from "react";
import { usePleaseStay } from "react-use-please-stay"

function App() {
  usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);
  return <></>;
}

export default App;

Give it a go to see if everything is still working as expected:

When the app is up and running, you should still see the title toggling functionality, just as you had in the previous lesson. Looks like everything is working! As a cleanup, you can now get rid of your no longer needed 

 is a great tool that allows you to continually develop and test your hook without having to continually publish it to npm and re-install it.

In the next lesson, you will clean up and refactor what you have built so far.

---
title: Packaging react-use-please-stay as an npm Module using Rollup
code: https://gitlab.com/fullstackio/books/master-custom-react-hooks-with-typescript/-/blob/production/course/code/lesson-6
isPublicLesson: true
useMdx: true
privateVideoUrl: https://stream.mux.com/Eb6U8602UY019LtBoHl4n02U5KkJtLiEl5eVsUfmNDSPM00.m3u8
---

The size of your codebase is already expanding, and you can imagine how cumbersome it will be to continually modify and run your `copy-hook` script. Package your code as an npm module so you can use it directly in your example app via `npm link`.

You will install three packages as dev dependencies:

1.  Rollup, 
2.  The standard TypeScript plugin for rollup, 
3.  tslib, which is required by the TypeScript Rollup plugins

```shell
npm install --save-dev rollup @rollup/plugin-typescript tslib
```

Now, create a `rollup.config.js` file in the project root: 

```shell
touch rollup.config.js
```

Next, import the Rollup TypeScript plugin and set up the following configuration:

```js
import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'module',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};
```

This config tells Rollup to package your `src/index.ts` file into a common JS `index.js` file in the `dist` folder. This `dist/index.js` file will be the actual source code that is imported when your library is used.

Now, you need to replace your `"build"` npm script, from `tsc` to `rollup -c`: 

```json
"build": "rollup -c"
```

The `-c` flag tells Rollup to use your `rollup.config.js` file when packaging. Finally, you'll need to expose the files you want to package, in this case, `usePleaseStay`, in a new `index.ts` file. First, create the `index.ts` file:

```shell
touch src/index.ts
```

Then, add the following code:

```ts
export { usePleaseStay } from './hooks/usePleaseStay';
```

You'll also need to allow synthetic default imports for rollup to work, since `React` itself is a synthetic default import. So, add the following to your `tsconfig.json`:

```json
"allowSyntheticDefaultImports": true
```

You also need to add a type declaration so TypeScript won't complain when you use it in your example project:

```json
"declaration": true
```

You also need to ensure that Rollup, by way of TypeScript, will only be building your `src` folder, and not your `example` folder. So, include the `src/` folder and exclude the `example` folder in `tsconfig.json`:

```json
{
  "compilerOptions": {
    // ...
  },
  "include": ["src"],
  "exclude": ["example"]
}
```

Since your `usePleaseStay` is about to become an npm module, you need to inform npm of this within `package.json`:

```json
"type": "module"
```

And you should update the value of `"main"` in `package.json` to point to your new distributable `index.js`:

```json
"index": "dist/index.js"
```

Try packaging your hook with your new build command:

```shell
npm run build
```

You should get some output that looks like this:

```shell
created dist/index.js in 1s
```

To double-check, look in the `dist/` folder. You should see the following files and folders:

    .
    ├── hooks
    │   ├── useInterval.d.ts
    │   └── usePleaseStay.d.ts
    ├── index.d.ts
    ├── index.js
    └── index.js.map

If `usePleaseStay.js` is still in your `dist` folder, you should delete it.

## Modifications to `package.json`

To be able to use `npm link`, you have to modify a few properties in `package.json`. First, since this is a module with types, thanks to rollup's type declaration, you should also specify the `"types"` property as `dist/index.d.ts`. Finally, provide the `"files"` property. This tells npm all relevant files needed for your package. In your case, it's the `dist/` folder where Rollup placed all your packaged files. However, npm expects this to be an array, so be sure to pass it as `["dist"]`. Altogether, these two changes to `package.json` are as follows:

```json
"types": "dist/index.d.ts",
"files": ["dist"]
```

## Running `npm link` Commands

You should now be able to run npm link:

```shell
npm link
```

Before you can use this linked package in your example app, you need to be sure to link to a single version of React. In your case, the version of React that is used in the `example/` folder, so that React does not complain about finding two versions of React in your project. (Note that you _do_ have two versions: the one in your root folder, but also the one used by the example app in the `example/` folder.) Note that even if the actual semantic version is identical, React will still complain about seeing two locations. You can use `npm link` to use the example version's React. Still inside the _root_ directory, issue this command:

```shell
npm link ./example/node_modules/react
```

Now you can move into the `example` directory:

```shell
cd example
```

and link your package:

```shell
npm link react-use-please-stay
```

To double-check that the link worked, you can issue:

```shell
npm ls --location=global --depth=0 --link=true
```

You may have more, but should at least have these two entries:

    /path/to/your/nvm/.nvm/versions/node/v16.18.1/lib
    ├── react-use-please-stay@1.0.0 -> ./path/to/your/project/react-use-please-stay-course
    └── react@18.2.0 -> ./path/to/your/project/example/node_modules/react

Where `/path/to/your/nvm` is where your nvm install lives (typically the root) and `/path/to/your/project` is where you have decided to place your `react-use-please-stay` project folder.

Now, in `App.tsx`, instead of importing a copy of `usePleaseStay` from the `hooks/` folder, you can import it directly from the linked package:

```tsx
import React from "react";
import { usePleaseStay } from "react-use-please-stay"

function App() {
  usePleaseStay(["Title One!", "Title Two!!", "Title Three?!?"]);
  return <></>;
}

export default App;
```

Give it a go to see if everything is still working as expected:

```shell
npm run start
```

When the app is up and running, you should still see the title toggling functionality, just as you had in the previous lesson. Looks like everything is working! As a cleanup, you can now get rid of your no longer needed `copy-hook` script, and also delete the `hooks` folder from your example project.

`npm link` is a great tool that allows you to continually develop and test your hook without having to continually publish it to npm and re-install it.

In summary, you:

-   Installed Rollup and the TypeScript plugin for rollup
-   Created a `rollup.config.js` file to package your hook
-   Created an `index.ts` file to expose your hook
-   Modified your `package.json` and set important properties needed to package your hook
-   Linked your package and a specific React version to your example project using `npm link`
-   Imported your hook directly from your package (instead of a copied version) in your example project
-   Tested your example application to ensure everything was still working

In the next lesson, you will clean up and refactor what you have built so far.
