# react-redux-lock > A simple container for creating responsive apps Latest version **0.1.2** (published 2018-01-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-redux-lock pnpm add react-redux-lock yarn add react-redux-lock bun add react-redux-lock ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2018-01-02 | | First published | 2018-01-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 42 | | Known vulnerabilities | 0 (+8 in 2 direct dependencies) | | Install scripts | no | | Author | alireza valizade | | Maintainers | alirezavalizade | | Keywords | react, reactjs, redux, responsive | ## Links - npm: https://www.npmjs.com/package/react-redux-lock - Repository: https://github.com/alirezavalizade/react-redux-lock - Homepage: https://github.com/alirezavalizade/react-redux-lock#readme - Issues: https://github.com/alirezavalizade/react-redux-lock/issues - npm.io page: https://npm.io/package/react-redux-lock ## Dependencies (42) - [raf](https://npm.io/package/raf.md) 3.4.0 - [jest](https://npm.io/package/jest.md) 20.0.4 - [chalk](https://npm.io/package/chalk.md) 1.1.3 - [react](https://npm.io/package/react.md) ^16.2.0 - [redux](https://npm.io/package/redux.md) ^3.7.2 - [dotenv](https://npm.io/package/dotenv.md) 4.0.0 - [eslint](https://npm.io/package/eslint.md) 4.10.0 - [promise](https://npm.io/package/promise.md) 8.0.1 - [webpack](https://npm.io/package/webpack.md) 3.8.1 - [fs-extra](https://npm.io/package/fs-extra.md) 3.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^16.2.0 - [babel-core](https://npm.io/package/babel-core.md) 6.26.0 - [babel-jest](https://npm.io/package/babel-jest.md) 20.0.3 - [css-loader](https://npm.io/package/css-loader.md) 0.28.7 - [url-loader](https://npm.io/package/url-loader.md) 0.6.2 - [file-loader](https://npm.io/package/file-loader.md) 1.1.5 - [react-redux](https://npm.io/package/react-redux.md) ^5.0.6 - [autoprefixer](https://npm.io/package/autoprefixer.md) 7.1.6 - [babel-eslint](https://npm.io/package/babel-eslint.md) 7.2.3 - [babel-loader](https://npm.io/package/babel-loader.md) 7.1.2 - [style-loader](https://npm.io/package/style-loader.md) 0.19.0 - [whatwg-fetch](https://npm.io/package/whatwg-fetch.md) 2.0.3 - [babel-runtime](https://npm.io/package/babel-runtime.md) 6.26.0 - [eslint-loader](https://npm.io/package/eslint-loader.md) 1.9.0 - [object-assign](https://npm.io/package/object-assign.md) 4.1.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) 2.0.8 - [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8 - [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^4.2.1 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.6.1 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 2.9.4 - [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.4.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 2.29.0 - [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.8.0 - [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^3.1.0 - [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.39.1 - [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 5.1.1 - [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 3.2.0 - [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^2.0.1 - [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 1.3.2 - [sw-precache-webpack-plugin](https://npm.io/package/sw-precache-webpack-plugin.md) 0.11.4 - [extract-text-webpack-plugin](https://npm.io/package/extract-text-webpack-plugin.md) 3.0.2 - [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.2 (latest) — 2018-01-02 - 0.1.1 — 2018-01-01 - 0.1.0 — 2018-01-01 ## README # react-redux-lock A simple container for creating responsive apps ### Installation npm: ```bash npm install react-redux-lock --save ``` yarn: ```bash yarn add react-redux-lock ``` ### Usage ```js 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 (
{mobile &&

See me just in mobile

} {!mobile && tablet &&

See me just in tablet

} {!mobile && !tablet && desktop &&

See me just in desktop

}
); } } export default App; ``` And you should add in your reducers: ```js 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 | --- _Source: https://npm.io/package/react-redux-lock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._