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