Only is not type safe: it accepts as and ...props and drill those props. But there is no check to see if those props match what's should be allowed for the component.
We could try to be smart with those types, but as we're rendering just a <Fragment>, I don't think it makes sense.
So instead of a code like this:
const App = () => (
<ul>
<Only as="li" on="xs">
Only visible for extra small devices (portrait phones)
</Only>
<Only as="li" on="sm">
Only visible for small devices (landscape phones)
</Only>
<Only as="li" on="md">
Only visible for medium devices (tablets)
</Only>
<Only as="li" on="lg">
Only visible for large devices (desktops)
</Only>
<Only as="li" on="xl">
Only visible for extra large devices (large desktops)
</Only>
<Only as="li" on="sm xl">
Only visible for small AND extra large devices
</Only>
</ul>
);
We'd instead do:
const App = () => (
<ul>
<Only on="xs">
<li>Only visible for extra small devices (portrait phones)</li>
</Only>
<Only on="sm">
<li>Only visible for small devices (landscape phones)</li>
</Only>
<Only on="md">
<li>Only visible for medium devices (tablets)</li>
</Only>
<Only on="lg">
<li>Only visible for large devices (desktops)</li>
</Only>
<Only on="xl">
<li>Only visible for extra large devices (large desktops)</li>
</Only>
<Only on="sm xl">
<li>Only visible for small AND extra large devices</li>
</Only>
</ul>
);
Yes it's a big breaking change, but I don't think this adds a lot of benefits for the codebase
Onlyis not type safe: it acceptsasand...propsand drill those props. But there is no check to see if thosepropsmatch what's should be allowed for the component.We could try to be smart with those types, but as we're rendering just a
<Fragment>, I don't think it makes sense.So instead of a code like this:
We'd instead do:
Yes it's a big breaking change, but I don't think this adds a lot of benefits for the codebase