react-redux-lock

0.1.2 • Public • Published

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

Package Sidebar

Install

npm i react-redux-lock

Weekly Downloads

0

Version

0.1.2

License

MIT

Last publish

Collaborators

  • alirezavalizade