127 lines
3.1 KiB
Raw Permalink Normal View History

2018-01-18 16:53:52 +00:00
# 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.