redux-doctitle

Redux middleware for managing document title.

Installation

redux-doctitle requires Redux 3.0 or later.

npm install --save-dev redux-doctitle

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

Usage

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
    },
    dispatch
  );
};

const reduxContainer = connect(
  mapStateToProps, mapDispatchToProps
)(HelloWorldComponent);

export default reduxContainer;

API

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.

Development

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.

Contributing

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.

Author

redux-doctitle is developed by Tomek Wójcik.

License

redux-doctitle is licensed under the MIT License.