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

Package Sidebar

Install

npm i react-page-context

Weekly Downloads

2

Version

0.0.5

License

MIT

Last publish

Collaborators

  • koistya