react-redux-lock

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