🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →

react-break

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-break - npm Package Compare versions

Comparing version

to
0.3.0

@@ -33,3 +33,3 @@ 'use strict';

componentWillMount: function componentWillMount() {
componentDidMount: function componentDidMount() {
this.onBreakpointsChange();

@@ -73,3 +73,3 @@ },

var breakComponentGenerator = function generator(breakpoints) {
var layoutGenerator = function componentGenerator(breakpoints) {
return function createComponent(method, breakpoint) {

@@ -94,3 +94,12 @@ return _react2['default'].createClass({

/* eslint-disable no-console */
var breakComponentGenerator = function generator(breakpoints) {
console.warn('Warning: "breakComponentGenerator" was renamed to ' + '"layoutGenerator" in versions >=0.3.0 and will be deprecated on some ' + 'future version.');
return layoutGenerator(breakpoints);
};
/* eslint-enable no-console */
exports.layoutGenerator = layoutGenerator;
exports.breakComponentGenerator = breakComponentGenerator;
exports['default'] = Break;
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo';
React.render(<Demo />, document.querySelector('#content'));
ReactDOM.render(<Demo />, document.querySelector('#content'));
import React from 'react';
import { breakComponentGenerator } from 'react-break';
import { layoutGenerator } from 'react-break';
const generator = breakComponentGenerator({
const layout = layoutGenerator({
mobile: 0,

@@ -11,6 +11,6 @@ phablet: 550,

const OnMobile = generator('is', 'mobile');
const OnAtLeastTablet = generator('atLeast', 'tablet');
const OnAtMostPhablet = generator('atMost', 'phablet');
const OnDesktop = generator('is', 'desktop');
const OnMobile = layout('is', 'mobile');
const OnAtLeastTablet = layout('atLeast', 'tablet');
const OnAtMostPhablet = layout('atMost', 'phablet');
const OnDesktop = layout('is', 'desktop');

@@ -17,0 +17,0 @@ const Demo = React.createClass({

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo';
React.render(<Demo />, document.querySelector('#content'));
ReactDOM.render(<Demo />, document.querySelector('#content'));
{
"name": "react-break",
"version": "0.2.1",
"version": "0.3.0",
"description": "Responsive breakpoints in React.",

@@ -14,7 +14,7 @@ "main": "./build/react-break.js",

"run-demos": "NODE_ENV=development webpack-dev-server --config webpack.demos.config.js --content-base demos/ --progress --colors",
"lint": "eslint --ext .jsx ./src ./demos",
"test": "karma start --single-run"
"lint": "eslint --ext .jsx ./src ./demos"
},
"keywords": [
"react",
"react-component",
"component",

@@ -24,4 +24,3 @@ "breakpoint",

"utility",
"layout",
"component"
"layout"
],

@@ -43,17 +42,15 @@ "author": {

"babel-loader": "^5.3.2",
"eslint": "^1.5.1",
"eslint-config-airbnb": "0.0.9",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^3.4.2",
"eslint": "^1.7.3",
"eslint-config-airbnb": "^0.1.0",
"eslint-loader": "^1.1.0",
"eslint-plugin-react": "^3.6.3",
"react-dom": "^0.14.0",
"react-hot-loader": "^1.3.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"breakjs": "^0.1.8",
"react": "^0.13.3"
},
"peerDependencies": {
"react": "0.13.x"
"breakjs": "^0.1.9",
"react": "0.14.x || 0.13.x"
}
}

@@ -7,3 +7,4 @@ # react-break

[BreakJS](https://github.com/nygardk/BreakJS/). Create declarative
breakpoint components for your React apps.
breakpoint components for your React apps. Render different components
for different layouts.

@@ -17,9 +18,15 @@

## Usage example
## Compatibility
Compatible with React versions `0.13.x` and `0.14.x`.
## Usage examples
Create components declaratively using layoutGenerator:
```js
import React from 'react';
import Break from 'react-break';
import { layoutGenerator } from 'react-break';
const UIBreakpoints = {
const layout = layoutGenerator({
mobile: 0,

@@ -29,4 +36,9 @@ phablet: 550,

desktop: 992
};
});
const OnMobile = layout('is', 'mobile');
const OnAtLeastTablet = layout('atLeast', 'tablet');
const OnAtMostPhablet = layout('atMost', 'phablet');
const OnDesktop = layout('is', 'desktop');
const myApp = React.createClass({

@@ -36,16 +48,17 @@ render() {

<div>
<Break breakpoints={UIBreakpoints}
query={{method: 'is', breakpoint: 'mobile'}}>
<div>Displayed on mobile layout only</div>
</Break>
<OnMobile>
Displayed on mobile layout only
</OnMobile>
<Break breakpoints={UIBreakpoints}
query={{method: 'atLeast', breakpoint: 'tablet'}}>
<div>Displayed on tablet and desktop layouts</div>
</Break>
<OnAtLeastTablet>
Displayed on tablet and desktop layouts
</OnAtLeastTablet>
<Break breakpoints={UIBreakpoints}
query={{method: 'atMost', breakpoint: 'phablet'}}>
<div>Displayed on mobile and phablet layouts</div>
</Break>
<OnAtMostPhablet>
Displayed on mobile and phablet layouts
</OnAtMostPhablet>
<OnDesktop>
Displayed on desktop layout only
</OnDesktop>
</div>

@@ -56,12 +69,13 @@ );

```
See also demos/demo0.
See also demos/demo1.
------------------
----------------------------------------------
A new, even more declarative approach in version 0.2.x:
Create layout components manually by using `<Break />` component:
```js
import React from 'react';
import { breakComponentGenerator } from 'react-break';
import Break from 'react-break';
const generator = breakComponentGenerator({
const UIBreakpoints = {
mobile: 0,

@@ -71,9 +85,4 @@ phablet: 550,

desktop: 992
});
};
const OnMobile = generator('is', 'mobile');
const OnAtLeastTablet = generator('atLeast', 'tablet');
const OnAtMostPhablet = generator('atMost', 'phablet');
const OnDesktop = generator('is', 'desktop');
const myApp = React.createClass({

@@ -83,17 +92,16 @@ render() {

<div>
<OnMobile>
Displayed on mobile layout only
</OnMobile>
<Break breakpoints={UIBreakpoints}
query={{method: 'is', breakpoint: 'mobile'}}>
<div>Displayed on mobile layout only</div>
</Break>
<OnAtLeastTablet>
Displayed on tablet and desktop layouts
</OnAtLeastTablet>
<Break breakpoints={UIBreakpoints}
query={{method: 'atLeast', breakpoint: 'tablet'}}>
<div>Displayed on tablet and desktop layouts</div>
</Break>
<OnAtMostPhablet>
Displayed on mobile and phablet layouts
</OnAtMostPhablet>
<OnDesktop>
Displayed on desktop layout only
</OnDesktop>
<Break breakpoints={UIBreakpoints}
query={{method: 'atMost', breakpoint: 'phablet'}}>
<div>Displayed on mobile and phablet layouts</div>
</Break>
</div>

@@ -104,3 +112,3 @@ );

```
See also demos/demo1.
See also demos/demo0.

@@ -127,9 +135,10 @@ ## Options

### breakComponentGenerator(String [layout method], String [layout name]) -> Component
### layoutGenerator(String [layout method], String [layout name]) -> Component
`breakComponentGenerator` is a utility function that allows you to
`layoutGenerator` is a utility function that allows you to
create custom components for breaking the layout, with declarative names.
It returns a function that takes two parameters, layout method and
a breakpoint name.
First you constructing the generator by calling it with the breakpoints
object (key-value pairs of breakpoint name and the pixel value). It returns a
function that takes two parameters, layout method and a breakpoint name.

@@ -136,0 +145,0 @@ ## License

@@ -22,3 +22,3 @@ import React from 'react';

componentWillMount() {
componentDidMount() {
this.onBreakpointsChange();

@@ -65,3 +65,3 @@ },

const breakComponentGenerator = function generator(breakpoints) {
const layoutGenerator = function componentGenerator(breakpoints) {
return function createComponent(method, breakpoint) {

@@ -91,3 +91,14 @@ return React.createClass({

export { breakComponentGenerator };
/* eslint-disable no-console */
const breakComponentGenerator = function generator(breakpoints) {
console.warn('Warning: "breakComponentGenerator" was renamed to ' +
'"layoutGenerator" in versions >=0.3.0 and will be deprecated on some ' +
'future version.');
return layoutGenerator(breakpoints);
};
/* eslint-enable no-console */
export { layoutGenerator, breakComponentGenerator };
export default Break;

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display