|
@@ -0,0 +1,126 @@
|
|
|
+# 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](http://npmjs.com/) package manager with a
|
|
|
+module bundler like [Webpack](https://webpack.js.org/) or
|
|
|
+[Browserify](http://browserify.org/).
|
|
|
+
|
|
|
+## 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](https://github.com/karma-runner/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](https://www.bthlabs.pl/).
|
|
|
+
|
|
|
+## License
|
|
|
+
|
|
|
+redux-doctitle is licensed under the MIT License.
|