Responsive
component that uses the matchMedia
Javascript API to listen to when specific breakpoints are hit. This allows greater control over what props are set and what and how a component is rendered. This also provides a way to keep the render functions generic, without needing to give elements specific classes to target them with CSS.import React, { Component } from 'react';
import { Flex, Responsive, Text } from 'preshape';
class MyComponent extends Component {
render() {
return (
<Responsive queries={ ['10rem', '20rem'] }>
{ (match) => (
<Flex direction={ match('10rem') ? 'horizontal' : 'vertical' }>
{
match({
'10rem': <Text size="x2">Viewport is bigger than 10rem but less than 20rem</Text>,
'20rem': <Text size="x3">Viewport is bigger than 20rem</Text>
}) || (
<Text size="x1">Viewport is less than 10rem</Text>
)
}
</Flex>
) }
</Responsive>
);
}
}
Check out this project on Github