3.1 KiB
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.