Permalink
Fetching contributors…
Cannot retrieve contributors at this time
32 lines (24 sloc) 582 Bytes

<WindowWidthQuery>

Use it for responsive design, renders only the first child that matches query against the current window width.

Usage

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

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

<WindowWidthQuery> is simply a shortcut for

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