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
; { ; return <div> <h1>Welcome!</h1> <p>This is my personal home page</p> </div> ;} HomePagecontextTypes = page: PropTypesfuncisRequired ; ;
main.js
;;;; ReactDOM;
It should yield the following HTML markup:
My Home Page ...
Server-side Rendering Example
server.js
;;;; const app = ; app; app;
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