https://github.com/RyanFitzgerald/react-page-name

Lightweight and simple package to easily update page names in a React app
https://github.com/RyanFitzgerald/react-page-name

Last synced: about 1 month ago
JSON representation

Lightweight and simple package to easily update page names in a React app

• Host: GitHub
• URL: https://github.com/RyanFitzgerald/react-page-name
• Owner: RyanFitzgerald
• License: mit
• Created: 2019-10-14T16:55:40.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T22:42:33.000Z (almost 2 years ago)
• Last Synced: 2024-04-23T17:24:58.114Z (8 months ago)
• Language: JavaScript
• Homepage:
• Size: 275 KB
• Stars: 4
• Watchers: 3
• Forks: 2
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-page-name`
• awesome-react-hooks-cn - `react-page-name`
• awesome-react-hooks - `react-page-name`
• awesome-react-hooks - `react-page-name`

README

        
# React Page Name

![Travis CI Build Status](https://travis-ci.org/RyanFitzgerald/react-page-name.svg?branch=master)

![Dependencies](https://img.shields.io/david/ryanfitzgerald/react-page-name)

![MIT License](https://img.shields.io/npm/l/react-page-name)

![size](https://img.shields.io/bundlephobia/minzip/react-page-name)

React 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).

## Installation and Usage

`npm install react-page-name` to first install the dependency.

After installation, there are 2 options for usage:

### Hook Usage

The first option is use via a React hook inside your functional component.

```jsx

import React from 'react';

import { usePageName } from 'react-page-name';

const MyComponent = props => {

  usePageName('My Page Page!');

  return 
Cool Component!
;

};


export default MyComponent;

```

### Higher-Order Component Usage

The 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.

```jsx

import React from 'react';

import { withPageName } from 'react-page-name';

class MyComponent extends React.Component {

  render() {

    return 
Cool Component!
;

  }

}


export default withPageName('My Page Name!')(MyComponent);

```

#### Props

`props.setPageName`

The 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:

```jsx

import React from 'react';

import { withPageName } from 'react-page-name';

class MyComponent extends React.Component {

  componentDidMount() {

    this.props.setPageName('Another name!');

  }

  render() {

    return 
Cool Component!
;

  }

}


export default withPageName()(MyComponent);

```

## Changelog

### Current Version: 1.0.1

#### Features

- Add dependency array to `useEffect` for performance increase

#### Bug Fixes

- Fix exports of built files

See CHANGELOG.md for more.

## License

MIT License. See LICENSE.md for details.