import {withBreakpoints, bp} from 'react-element-breakpoints';

const FancyHeader = withBreakpoints({
	wide: ({width}) => width >= 400,
	tall: ({height}) => height >= 200,
})(props => <h1 style={{
	fontSize: bp('18px', {
		wide: '30px'
	})(props),

	color: bp('black', {tall: 'red'})(props),
}}>
	It works!
</h1>);

const FancyHeader = withBreakpoints({
	wide: ({width}) => width >= 400,
	tall: ({height}) => height >= 200,
})(styled.h1`
	font-size: ${bp('18px', {
		wide: '30px'
	})},

	color: ${bp('black', {tall: 'red'})},
`);