Hidden is a utility, that lets you hidden content responsively with server-side rendering support.
Supports rendering content responsively based on the viewport size
Can be applied to other components without rendering an additional wrapper


Hidden gives a way to hide content by passing viewport size at which you want to hide it with from and till properties. For example, from="l" will hide the content on starting with large viewport size. When till="l" is used instead, component will hide the content on all viewports smaller than large.

These properties can be combined to provide more granular control to the content display. For instance, from="m" till="l" will hide the content only for medium viewport as it will disable it starting with large viewport. At the same time it can be used an opposite way, till="m" from="l" which will hide the content outside the passed viewport range.

If you need to hide an element without adding any additional wrappers, you can use render props approach with Hidden.


froms, m, l, xl-falseStart viewport to hide, inclusive
tills, m, l, xl-falseEnd viewport to hide, exclusive
asstring'div'falseTag used for rendering
childrenReactNode, (className) => ReactNode-false