Redux middleware for managing document title
|
5 years ago | |
---|---|---|
src | 5 years ago | |
tests | 5 years ago | |
.babelrc | 5 years ago | |
.eslintrc.json | 5 years ago | |
.gitignore | 5 years ago | |
Gruntfile.js | 5 years ago | |
LICENSE | 5 years ago | |
README.md | 5 years ago | |
karma.conf.js | 5 years ago | |
package.defs.js | 5 years ago | |
package.json | 5 years ago | |
webpack.config.js | 5 years ago |
Redux middleware for managing document title.
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.
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;
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.