127 lines
3.1 KiB
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 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 youre using [npm]( package manager with a
module bundler like [Webpack]( or
## 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
const reduxContainer = connect(
mapStateToProps, mapDispatchToProps
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
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
* `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.
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.