Nightingale Posing Mischievously


    0.0.5 • Public • Published

    React Page Context

    NPM version NPM downloads Build Status Coverage Status Dependency Status Online Chat

    A higher-order React component that allows to set document's title, description and other meta tags, as well as <link> and <script> tags from inside regular React components via context variable.

    See the changelog for past and future (planned) changes to the project  |  Join #react-starter-git on Gitter to stay up to date

    How to Install

    $ npm install react-page-context --save

    Getting Started

    1. Import PageContext types from react-page-context npm module
    2. Add contextTypes static property to your React component that needs access to document.title and other <head> elements
    3. Use function to manipulate document's <head> section

    Here is an example:


    import React, { PropTypes } from 'react';
    function HomePage(props, { page }) {
       title: 'My Home Page',
       description: 'Some page description',
       meta: [
         { name: 'twitter:card', content: 'summary' }
      return (
          <p>This is my personal home page.</p>
    HomePage.contextTypes = { page: PropTypes.func.isRequired };
    export default HomePage;


    import React from 'react';
    import ReactDOM from 'react-dom';
    import PageContext from 'react-page-context';
    import HomePage from './components/HomePage';
        <HomePage />

    It should yield the following HTML markup:

        <title>My Home Page</title>
        <meta name="description" content="Some page description">
        <meta name="twitter:card" content="summary">

    Server-side Rendering Example


    import express from 'express';
    import ReactDOM from 'react-dom/server';
    import PageContext from 'react-page-context';
    import HomePage from './components/HomePage';
    const app = express();
    app.get('/', (req, res) => {
      let page;
      const body = ReactDOM.renderToString(
        <PageContext onChange={value => (page = value)}>
          <HomePage />
            ${ => `<meta name="${}" content="${meta.content}">`)}
          <body><div id="root">${body}</div></body>

    Node: This is a simplified example. In a real-world app you would need to replace the ES6 template string above with a real template powered by Jade or EJS for security and performance considerations.


    ♥ React Page Context and willing to contribute? Great! Here is a list of challenges you can help with:

    • Comment on the API design here
    • Add support of setting <link> and <script> elements via
    • Add support of setting HTML attributes such as lang="..."
    • Review and improve documentation to the project (
    • Review and improve the source code (createPage.js, PageContext.js)
    • Review and improve unit tests (PageContextSpec.js)
    • Suggest ways to improve performance of this component
    • Configure automated tests in real browsers via Travis and Sauce Labs or Browserstack
    • ...

    Related Projects

    Get in Touch


    Copyright © 2016 Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

    Made with ♥ by Konstantin Tarkus (@koistya) and contributors


    npm i react-page-context

    DownloadsWeekly Downloads






    Last publish


    • koistya