https://github.com/akiran/react-responsive-mixin

Mixin to develop responsive react components
https://github.com/akiran/react-responsive-mixin

Last synced: about 2 months ago
JSON representation

Mixin to develop responsive react components

• Host: GitHub
• URL: https://github.com/akiran/react-responsive-mixin
• Owner: akiran
• License: mit
• Created: 2014-11-23T04:38:47.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-09-01T16:45:12.000Z (over 8 years ago)
• Last Synced: 2024-11-09T20:10:42.301Z (about 2 months ago)
• Language: JavaScript
• Homepage: http://webrafter.com/opensource/react-responsive-mixin
• Size: 156 KB
• Stars: 96
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-responsive-mixin

> react-responsive-mixin makes building responsive components easy

This mixin adds method called `media()` to the react component.

This is a wrapper around [enquire.js](http://wicky.nillia.ms/enquire.js/)

### [Demo](http://webrafter.com/opensource/react-responsive-mixin)

### Usage

```javascript

this.media(query, handler)

```

##### `query`

query is a media query definition either in string or object format.

This mixin internally uses [json2mq](https://github.com/akiran/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](http://wicky.nillia.ms/enquire.js/#api) API

##### Example

```javascript

var React = require('react');

var ResponsiveMixin = require('react-responsive-mixin');

var Component = React.createClass({

  mixins: [ResponsiveMixin],

  getInitialState: function () {

    return { url: '/img/large.img' };

  },

  componentDidMount: function () {

    this.media({maxWidth: 600}, function () {

      this.setState({url: '/img/small.jpg'});

    }.bind(this));

    this.media({minWidth:601, maxWidth: 1024}, function () {

      this.setState({url: '/img/medium.jpg'});

    }.bind(this));

    this.media({minWidth: 1025}, function () {

      this.setState({url: '/img/large.jpg'});

    }.bind(this));

  },

  render: function () {

    return ;

  }

});

```