React Weixin Title

Provides a declarative way to specify document.title in a single-page app.
This component can be used on weixin for iOS as well.

Installation

npm install --save react-weixin-title

Example

Assuming you use something like react-router:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import { ChangeWeixinTitle } from 'react-weixin-title';
 
import App from './containers/App';
import Home from './routes/Home';
import GettingStarted from './routes/GettingStarted';
 
import './styles/styles.scss';
 
const title = 'React Weixin Title'; //your title here
const src = '/favicon.ico'; //a valid url, i.e. '/favicon.ico'
 
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} onEnter={() => new ChangeWeixinTitle(title, src)} />
      <Route path="getting-started" component={GettingStarted} />
    </Route>
  </Router>
), document.getElementById('app'));

Or use WeixinTitle component

import React from 'react';
import { WeixinTitle } from 'react-weixin-title';
 
const title = 'your title here'; //your title here
const src = '/favicon.ico'; //a valid url, i.e. favicon.ico
 
class Demo extends React.Component {
  render() {
    return (
      <WeixinTitle title={title} src={src}>
        //your code here
      </WeixinTitle>
    )
  }
}

Live Demo

References

微信前端开发有哪些坑或者黑魔法？

License

Copyright © 2016 yahiousun. This source code is licensed under the MIT license found in the LICENSE file.