Skip to main content
CourseFlix

Master Custom React Hooks with TypeScript

2h 21m 3s
English
Paid

Learn how to build your own custom React Hook package with clear steps and real TypeScript code. You will see how each part works, and you will test the hook as you build it.

What You Will Learn

You will write a custom React Hook with TypeScript. You will use simple patterns to keep your code clean and easy to read. You will also add features that make the hook useful for other developers who install it from npm.

Who This Course Is For

This course fits you if you know the basics of React and TypeScript. You do not need deep knowledge. Each lesson uses clear steps so you can follow the work and understand why each choice matters.

How the Course Works

The course has four modules. Each module builds on the one before it. You will write code, test ideas, and publish real packages.

Module 1: Project Setup

You will create the tools you need for the hook package. You will set up the build process and write a small demo app to test the hook in real time.

Module 2: Add Core Features

You will add useful features such as custom document titles and dynamic favicons. You will learn how to keep these features simple and safe.

Module 3: Improve and Publish the Package

You will tune your code for speed and stability. You will prepare the package for npm and publish it so others can install and use it.

Module 4: Build Docs and Examples

You will publish an example app that shows the hook in action. You will also create a small docs site so users can read clear setup steps and API details.

About the Author: fullstack.io

fullstack.io thumbnail

fullstack.io is the publishing imprint behind some of the most cited learning books in the JavaScript ecosystem — The Road to React, Fullstack React, Fullstack D3, Fullstack Vue, and ng-book for Angular. The team (Nate Murray, Anthony Accomazzo, Ari Lerner, Adam Horton, and others) built the imprint by shipping comprehensive, deeply-revised technical books in the era when most learning resources were YouTube tutorials.

The video courses on fullstack.io extend the books with hands-on coding sessions and follow the same structured approach. The audience is engineers who want a single, high-quality source of truth rather than the fragmented landscape of free tutorials.

Watch Online 19 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 19 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Introduction
All Course Lessons (19)
#Lesson TitleDurationAccess
1
Course Introduction Demo
01:06
2
Environment Setup With nvm
02:40
3
Scaffolding a React Hook Library with npm init
07:33
4
Building a Skeleton create-react-app to Test the Hook
04:53
5
Building Title Looping Functionality with the useEffect Hook
12:23
6
Packaging react-use-please-stay as an npm Module using Rollup
09:16
7
Cleaning Up and Refactoring react-use-please-stay
06:30
8
Implementing a Cascading Letter Functionality
07:56
9
Implementing a Marquee Functionality
07:45
10
Implementing Favicon Modification Functionality
08:24
11
Add Interval Time as a Hook Parameter
02:28
12
Add Should Always Play as a Hook Parameter
02:28
13
Use Custom Types to Type the Hook Parameters
11:37
14
Adding a Development-only Warning Logger
09:11
15
Prevent Concurrent Usages of the Hook
06:58
16
Restore Original Values on Refocus and Unmount
09:45
17
Publish the Hook to npm
05:40
18
Prepare the Example App as a Public Example Page
19:09
19
Publish the Example App to GitHub Pages
05:21
Unlock unlimited learning

Get instant access to all 18 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

  • React Fundamentals thumbnail

    React Fundamentals

    Sources: ui.dev (ex. Tyler McGinnis)
    If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of develo
    4 hours 36 minutes 46 seconds
  • React Three Fiber: The Ultimate Guide to 3D Web Developmen thumbnail

    React Three Fiber: The Ultimate Guide to 3D Web Developmen

    Sources: Wawa Sensei
    3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
    9 hours 18 minutes 15 seconds 5 / 5
  • Full-Stack Fundamentals 1 - Frontend thumbnail

    Full-Stack Fundamentals 1 - Frontend

    Sources: Mckay Wrigley (takeoff)
    As part of this project, you will create your personal portfolio website from scratch. This will be an excellent way to showcase your work as you...
    1 hour 8 minutes 57 seconds
  • Loopback 4: Modern ways to Build APIs in Typescript & NodeJs thumbnail

    Loopback 4: Modern ways to Build APIs in Typescript & NodeJs

    Sources: udemy
    LoopBack is a highly-extensible, open-source Node.js framework that enables you to create dynamic end-to-end REST APIs with little or no coding. LoopBack 4 is t
    5 hours 14 minutes 32 seconds
  • Intro to Shopify App Development with React, Node & GraphQL thumbnail

    Intro to Shopify App Development with React, Node & GraphQL

    Sources: udemy
    This is the first course of it's kind on the internet! Learn how to make professional applications for the Shopify Platform using React, Node, Koa, GraphQL, Apo
    4 hours 10 seconds
  • PHP Symfony 4 API Platform + React.js Full Stack Masterclass thumbnail

    PHP Symfony 4 API Platform + React.js Full Stack Masterclass

    Sources: udemy
    Have you ever wanted to advance your PHP skills to the next level? Maybe you have some prior PHP experience but you never had a change to work with a framework?
    19 hours 24 minutes 17 seconds