react-break
Advanced tools
Comparing version
@@ -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" | ||
} | ||
} |
101
README.md
@@ -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
484117
4.65%2
-33.33%1941
1.73%139
6.92%12
9.09%+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
+ Added
- Removed
Updated
Updated