{"id":16232194,"url":"https://github.com/ryanfitzgerald/react-page-name","last_synced_at":"2025-03-19T14:31:05.292Z","repository":{"id":35162524,"uuid":"215098649","full_name":"RyanFitzgerald/react-page-name","owner":"RyanFitzgerald","description":"Lightweight and simple package to easily update page names in a React app","archived":false,"fork":false,"pushed_at":"2023-01-04T22:42:33.000Z","size":282,"stargazers_count":4,"open_issues_count":13,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-23T17:24:58.114Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RyanFitzgerald.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-14T16:55:40.000Z","updated_at":"2022-03-21T09:04:51.000Z","dependencies_parsed_at":"2023-01-15T15:03:54.703Z","dependency_job_id":null,"html_url":"https://github.com/RyanFitzgerald/react-page-name","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Freact-page-name","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Freact-page-name/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Freact-page-name/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RyanFitzgerald%2Freact-page-name/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RyanFitzgerald","download_url":"https://codeload.github.com/RyanFitzgerald/react-page-name/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221728406,"owners_count":16870856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T13:08:22.253Z","updated_at":"2024-10-27T20:14:32.510Z","avatar_url":"https://github.com/RyanFitzgerald.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Page Name\r\n\r\n![Travis CI Build Status](https://travis-ci.org/RyanFitzgerald/react-page-name.svg?branch=master)\r\n![Dependencies](https://img.shields.io/david/ryanfitzgerald/react-page-name)\r\n![MIT License](https://img.shields.io/npm/l/react-page-name)\r\n![size](https://img.shields.io/bundlephobia/minzip/react-page-name)\r\n\r\nReact Page Name is a lightweight and simple utility that allows you to easily update the document title (page name) in both a class and functional component in any React app. It comes with both a hook implementation and a higher-order component implementation (that makes use of the hook).\r\n\r\n## Installation and Usage\r\n\r\n`npm install react-page-name` to first install the dependency.\r\n\r\nAfter installation, there are 2 options for usage:\r\n\r\n### Hook Usage\r\n\r\nThe first option is use via a React hook inside your functional component.\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { usePageName } from 'react-page-name';\r\n\r\nconst MyComponent = props =\u003e {\r\n  usePageName('My Page Page!');\r\n\r\n  return \u003cdiv\u003eCool Component!\u003c/div\u003e;\r\n};\r\n\r\nexport default MyComponent;\r\n```\r\n\r\n### Higher-Order Component Usage\r\n\r\nThe second option is use via a Higher Order Component. The hook approach is recommended over the HOC, however when a hook can't be used (such as in a Class component), the HOC option is available.\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { withPageName } from 'react-page-name';\r\n\r\nclass MyComponent extends React.Component {\r\n  render() {\r\n    return \u003cdiv\u003eCool Component!\u003c/div\u003e;\r\n  }\r\n}\r\n\r\nexport default withPageName('My Page Name!')(MyComponent);\r\n```\r\n\r\n#### Props\r\n\r\n`props.setPageName`\r\n\r\nThe Higher-Order Component implementation injects a `setPageName` function into your component that can be used to change the page name at various points of the React lifecycle. This is especially helpful in class components where you sometimes will want to change the page name only after the component has mounted and more data is available. An example of the usage is:\r\n\r\n```jsx\r\nimport React from 'react';\r\nimport { withPageName } from 'react-page-name';\r\n\r\nclass MyComponent extends React.Component {\r\n  componentDidMount() {\r\n    this.props.setPageName('Another name!');\r\n  }\r\n\r\n  render() {\r\n    return \u003cdiv\u003eCool Component!\u003c/div\u003e;\r\n  }\r\n}\r\n\r\nexport default withPageName()(MyComponent);\r\n```\r\n\r\n## Changelog\r\n\r\n### Current Version: 1.0.1\r\n\r\n#### Features\r\n\r\n- Add dependency array to `useEffect` for performance increase\r\n\r\n#### Bug Fixes\r\n\r\n- Fix exports of built files\r\n\r\nSee CHANGELOG.md for more.\r\n\r\n## License\r\n\r\nMIT License. See LICENSE.md for details.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Freact-page-name","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanfitzgerald%2Freact-page-name","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanfitzgerald%2Freact-page-name/lists"}