Nightingale Posing Mischievously

    react-page-context

    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.page 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 context.page function to manipulate document's <head> section

    Here is an example:

    components/HomePage.js

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

    main.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import PageContext from 'react-page-context';
    import HomePage from './components/HomePage';
     
    ReactDOM.render(
      <PageContext>
        <HomePage />
      </PageContext>,
      document.getElementById('root')
    );

    It should yield the following HTML markup:

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

    Server-side Rendering Example

    server.js

    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 />
        </PageContext>
      );
      res.send(`
        <html>
          <head>
            <title>${page.title}</title>
            ${page.meta.map(meta => `<meta name="${meta.name}" content="${meta.content}">`)}
          </head>
          <body><div id="root">${body}</div></body>
        </html>
      `)
    });
     
    app.listen(3000);

    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.

    Contribute

    ♥ 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 context.page(...)
    • Add support of setting HTML attributes such as lang="..."
    • Review and improve documentation to the project (README.md)
    • 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

    License

    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

    Install

    npm i react-page-context

    DownloadsWeekly Downloads

    2

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • koistya