react-page-context

v0.0.5

Published

4 years ago

React Page Context allows to manage document's title, description and other meta tags, as well as <script> and <link> elements in SPA applications

0High
0Medium
0Low

koistya

react react component document document.title document title heade title meta meta tag meta tags link script base

React Page Context

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

Import PageContext types from react-page-context npm module
Add contextTypes static property to your React component that needs access to document.title and other <head> elements
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

React Starter Kit — Isomorphic web app boilerplate (Node.js/Express, React.js, GraphQL)
Babel Starter Kit — JavaScript library boilerplate (ES2015+, Babel)

Get in Touch

#react-starter-kit on Gitter
@koistya on Codementor

License

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme