react-redux-lock

A simple container for creating responsive apps

Installation

npm:

npm install react-redux-lock --save

yarn:

yarn add react-redux-lock

Usage

import React, { Component } from 'react';
import { Lock } from 'react-redux-lock';
import { connect } from 'react-redux';

@connect(state =>({
  lock: state.lock
}), {})

class App extends Component {
  render() {
    const { mobile, tablet, desktop } = this.props.lock;
    return (
      <div className="App">
        <Lock
          lock={[{ width: 490, key: 'mobile', greater: true },
          { width: 890, key: 'tablet', greater: true },
          { width: 1090, key: 'desktop', greater: true }]}
        />
        {mobile && <h1>See me just in mobile</h1>}
        {!mobile && tablet && <h1>See me just in tablet</h1>}
        {!mobile && !tablet && desktop && <h1>See me just in desktop</h1>}
      </div>
    );
  }
}

export default App;

And you should add in your reducers:

import { combineReducers } from 'redux';
import { reducer as lockReducer } from 'react-redux-lock';

const rootReducer = combineReducers({
  lock: lockReducer
});
export default rootReducer;

Properties

Property	Type	Description	Working
lock	Array of objects	Items that you want be lock	Yes
lock[i].width	Number	Width of screen you want be check with window.innerWidth	Yes
lock[i].key	String	Name of property in state	Yes
lock[i].greater	Bool	It's like min-width and max-width in css's media query - True is max-width and False is min-width	Yes
debounceTime	Number	debounce time for calculation function	Yes