`<WidthQuery>`

Renders only one of its children that matches width query.

Usage

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

<WidthQuery width={400}>
  <View maxWidth={300}>
    This will not render.
  </View>
  <View>
    This will render!
  </View>
</WidthQuery>

Props

width — required, number, width value to match queries against.

Children

Children of <ViewQuery> must be an array of at least two React elements. Use minWidth and maxWidth properties to match against the width, first matched child will be rendered. You can use any react component as children or the <View> wrapper component that is simply a shell that just renders its children.