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 |