redux-resize-props
v1.0.8
Published
Redux props resize, change redux store on resize.
Downloads
28
Maintainers
Readme
Redux props resize.
Update redux store on device resize. Only on mode change.
How to use
1) Add module to project.
npm i --save redux-resize-props
2) Import and add ResizeReducer
to your combineReducers
method
Example:
import {ResizeReducer} from "redux-resize-props"
const combinedReducers = combineReducers({
ResizeReducer
})
3) Connect redux to your main component, and init (ex. App.js)
Import:
import {Resize} from "redux-resize-props"
Init method in component constructor
constructor(props) {
super(props);
Resize(props.dispatch)
}
Connect component
App = connect()(App);
Now you have props with window size mode in all connected components
Example
const mapStateToProps = state => ({
windowSize: state.ResizeReducer.windowSize
});
Foo = connect(mapStateToProps)(Foo);
after this your can get mode using this.props.windowSize
inside your class.
Options
Default options
mobile <= 575
tablet > 575 && <= 1024
desktop > 1024
You can add custom params to init method
Example
constructor(props) {
super(props);
const config = [{
mode: 'mobile-xs',
width: 320
},{
mode: 'mobile',
width: 575
}, {
mode: 'tablet',
width: 1024
}]
Resize(props.dispatch, config)
}