Add Should Always Play as a Hook Parameter
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Master Custom React Hooks with TypeScript course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Master Custom React Hooks with TypeScript, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:16] It may be the case that the user of our hook wants the animation to be playing at all times, instead of only when the window is not in focus. This can be done by adding a Boolean parameter should always play to the use, please, stay hook.
[00:17 - 00:21] So we can add that here. Should always play.
[00:22 - 00:30] Boolean. And I'm going to forward that on to the use, listen to visibility change on mount hook.
[00:31 - 00:40] And within use, listen to visibility change on mount. We'll also add this Boolean parameter.
[00:41 - 00:57] And I'm going to hook that into the existing use effect. And the only modification is here, if should always play is true, then we're going to call set should iterate titles to true and return.
[00:58 - 01:14] We can save everything and rebuild our hook. And moving into the example project within app.tsx, I'm going to pass true to should always play.
[01:15 - 01:50] And if we start up the application, we can see that even though we are currently focused on this tab and regardless of if we lose focus, we always see the three second interval between the two titles and fav icons that we've set up, which is exactly what we expect . So in summary, we added a new parameter to the use, please stay hook called should always play, which is of type Boolean.
[01:51 - 02:02] We forwarded this parameter on to the use, listen to visibility change on mount hook. And we added it to the dependency array of the use effect hook here.
[02:03 - 02:15] And if it's true, we immediately call set should iterate titles to true and we return. That's everything for module two. We've built all the features for the hook.
[02:16 - 02:26] In module three, we will make some final optimizations and improvements to improve the developer experience and usage of our hook. And then we will publish our hook to npm.