Responsive

Utility function for being notified when the window size crosses the threshold between mobile and desktop. In general, grommet components take care of handling responsiveness within themselves. But, sometimes there are situations that require custom responsive handling. Using this utility guarantees that your changes will be in sync with the grommet ones at the same breakpoint.

Methods

start ({function (true|false)})
Called when the browser window size crosses the threshold between mobile and desktop. The argument is true when mobile and false when desktop.

Example

import Responsive from 'grommet/utils/Responsive';

export default class Dashboard extends Component {

  constructor() {
    super();
    this._onResponsive = this._onResponsive.bind(this);
    this.state = {};
  }

  componentDidMount () {
    this._responsive = Responsive.start(this._onResponsive);
  }

  componentWillUnmount {
    this._responsive.stop();
  }

  _onResponsive(small) {
    this.setState({ small });
  }

})