react-dynamic-title
The hook react-dynamic-title is used to make the title of our React application dynamic.
Installation
Use the package manager npm to install react-dynamic-title.
npm install react-dynamic-title
or
yarn add react-dynamic-title
Usage
import React from "react";
import useTitle from "react-dynamic-title";
export default function Foo() {
useTitle("Foo");
return <div>Foo</div>;
}
After that the title will be Foo | React app. If you want to remove the second part, just remove the innerHTML of title tag from index.js in forlder "public". then, the title will be like: Foo.
If you want to preserve the title of a unMounting componet, just pass a true value as second argument, like:
useTitle("Foo", true);
If you like to change the divider | by anything else, just pass it as third argument, and make sure that is the third argument, otherwise it will become second and preserve the title of unMounting component.
useTitle("Foo", false, "&");
title will be like: Foo & React App. If you didn't pass it, the default divider ' | ' will displayed.
Conclusion
This is my first package. While creating a React app, I am wondering how to make the title dynamic, thus I made a hook for it. It's a hook that I'm uploading because I think someone else will find it useful. Some components for the same purpose came to my attention, but I ignored them because I believed the hook would be simple to manage more. Finally, I humbly say, there is a lot of room for error. So let me know your feedbacks. Contact Me
Use and Support