README
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 viacontext.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 fromreact-page-context
npm module - Add
contextTypes
static property to your React component that needs access todocument.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 viacontext.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
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