react-document-title - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #go #android #rust #deep-learning #linux #macos #nodejs #cli #pytorch #open-source

react-document-title

(★ 1,850)

Declarative, nested, stateful, isomorphic document.title for React

File Explorer

Download Latest Version (.zip)

- browser.js
- common.js
.gitignore
.jshintrc
bower.json
index.js
LICENSE
package.json
README.md

🚀 Installation Guide

1. Get the code

git clone https://github.com/gaearon/react-document-title

Downloads the entire project code from GitHub to your computer.

cd react-document-title

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install --save react-document-title

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

React Document Title
====================

Provides a declarative way to specify `document.title` in a single-page app.  
This component can be used on server side as well.

Built with [React Side Effect](https://github.com/gaearon/react-side-effect).

## Installation

```
npm install --save react-document-title
```

Dependencies: React >= 0.13.0

## Features

* Does not emit DOM, not even a `<noscript>`;
* Like a normal React compoment, can use its parent's `props` and `state`;
* Can be defined in many places throughout the application;
* Supports arbitrary levels of nesting, so you can define app-wide and page-specific titles;
* Works just as well with isomorphic apps.

## Example

Assuming you use something like [react-router](https://github.com/rackt/react-router):

```javascript
function App() {
  // Use "My Web App" if no child overrides this
  return (
    <DocumentTitle title='My Web App'>
      <SomeRouter />
    </DocumentTitle>
  );
}

function HomePage() {
  // Use "Home" while this component is mounted
  return (
    <DocumentTitle title='Home'>
      <h1>Home, sweet home.</h1>
    </DocumentTitle>
  );
}

class NewArticlePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { title: 'Untitled' };
  }

render() {
    // Update using value from state while this component is mounted
    return (
      <DocumentTitle title={this.state.title}>
        <div>
          <h1>New Article</h1>
          <input
            value={this.state.title}
            onChange={(e) => this.setState({ title: e.target.value })}
          />
        </div>
      </DocumentTitle>
    );
  }
}
```

## Server Usage

If you use it on server, call `DocumentTitle.rewind()` **after rendering components to string** to retrieve the title given to the innermost `DocumentTitle`. You can then embed this title into HTML page template.

Because this component keeps track of mounted instances, **you have to make sure to call `rewind` on server**, or you'll get a memory leak.

## But What About Meta Tags?

Looking for something more powerful? Check out [React Helmet](https://github.com/nfl/react-helmet)!