InlineWidthQuery.md

Use it for responsive design, renders only the first child that matches query against the current available width of this element.

It is similar to <WindowWidthQuery>, but instead of using the browser window width, it detects the available inline width of the current element.

Usage

import {InlineWidthQuery} from 'libreact/lib/InlineWidthQuery';
import {View} from 'libreact/lib/View';

<InlineWidthQuery>
  <View maxWidth={300}>
    Up to 300px
  </View>
  <View>
    More than 300px
  </View>
</InlineWidthQuery>

<InlineWidthQuery> is simply a shortcut for

<SizeSensor>{({width}) =>
  <div>
    <WidthQuery width={width}>
      {/* Your queries here... */}
    </WidthQuery>
  </div>
}</SizeSensor>