react-responsive-decorator
react-responsive-decorator makes building responsive components easy. Adapted from https://github.com/akiran/react-responsive-mixin
This higher-order component / decorator adds a method called media()
to the react component.
This is a wrapper around enquire.js
NOTE: This library assumes you're using Babel >= 5, with either a) stage
set to 0; or b) have the experimental
transformers classProperties
and decorators
turned on. See https://babeljs.io/docs/usage/experimental/ for more information.
For more information on ES7 decorators, see: https://github.com/wycats/javascript-decorators
Usage
thispropsmediaquery handler
query
query is a media query definition either in string or object format. This mixin internally uses json2mq to convert media query from object to string format.
handler
handler is a function that needs to be executed when media query matches. handler can also be an object according to enquire.js API
Example
Simply add a @Responsive
decorator annotation at the top of your class like so:
;; @ResponsiveComponent state = isMobile: false { thispropsmedia minWidth: 768 { this; }; thispropsmedia maxWidth: 768 { this; }; } { const isMobile = thisstate; return <div> isMobile ? <div>Mobile</div> : <div>Not mobile</div> </div> ; } ;
Or, if you'd rather return a wrapped, Higher Order component, export like so:
;; Component ... MyComponent;
Credits
This code has been adapted from https://github.com/akiran/react-responsive-mixin in order to remove the mixin dependency.