Redux middleware for managing document title
Go to file
2018-01-18 18:08:13 +01:00
src Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
tests Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
.babelrc Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
.eslintrc.json Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
.gitignore Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
Gruntfile.js Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
karma.conf.js Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
LICENSE Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
package.defs.js Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
package.json Minor metadata update. 2018-01-18 18:08:13 +01:00 Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00
webpack.config.js Hello, redux-doctitle! 2018-01-18 17:53:52 +01:00


Redux middleware for managing document title.


redux-doctitle requires Redux 3.0 or later.

npm install --save-dev redux-doctitle

This assumes that youre using npm package manager with a module bundler like Webpack or Browserify.


In order to use redux-doctitle in your React components you need to install the middleware, first.

import {applyMiddleware, createStore} from "redux";
import {documentTitleMiddlewareFactory} from "redux-doctitle";

const documentTitleMiddleware = documentTitleMiddlewareFactory(["Example"]);
const store = createStore(
  reducer, initialState, applyMiddleware(documentTitleMiddleware)

Once this is done, you can use the provided action to change document title from your React components.

import PropTypes from "prop-types";
import React from "react";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {setDocumentTitle} from "redux-doctitle";

class HelloWorldComponent extends React.Component {
  componentDidMount () {
    this.props.actions.setDocumentTitle("Hello, World!");
  render () {
    return <div>Hello, World!</div>;

HelloWorldComponent.propTypes = {
  actions: PropTypes.shape({
    setDocumentTitle: PropTypes.func.isRequired

const mapStateToProps = (state, props) => {
  return {};

const mapDispatchToProps = (dispatch, props) => {
  const actions = bindActionCreators(
      setDocumentTitle: setDocumentTitle

const reduxContainer = connect(
  mapStateToProps, mapDispatchToProps

export default reduxContainer;


documentMiddlewareFactory(defaultTitleParts = [])

This is the middleware factory function. The defaultTitleParts argument is an optional array of title parts which will be appended to custom titles set through the setDocumentTitle action creator. If it's ommited, nothing will be appended.

Returns Redux-compatible middleware function.

setDocumentTitle(title = "")

This is the action creator that allows changing the document title.

Returns Redux action.


To bootstrap the development environment, clone the repo and run npm install from the root directory.

The package.json file provides the following scripts:

  • build - builds the library modules (minified and development with source map),
  • dev - starts Webpack watcher configured to build development library,
  • lint - performs an eslint run over the source code,
  • test - performs a single test run,
  • test:watch - starts karma with watcher.

NOTE: Tests require Chromium to be installed and available in the path. Consult karma-chrome-launcher docs for more info.


If you think you found a bug or want to send a patch, feel free to contact me through e-mail.

If you're sending a patch, make sure it passes eslint checks and is tested.


redux-doctitle is developed by Tomek Wójcik.


redux-doctitle is licensed under the MIT License.