Hidden
Hidden is a utility, that lets you hidden content responsively with SSR support.

Usage

Hidden gives a way to hide content by passing viewport size at which you want to hide it with above and below properties. Both properties are working as boundaries and are exclusive. For example, below="medium" will hide the content on small viewports.

Hidden on mobile screen sizes
Hidden on tablet and desktop screen sizes

By default, Hidden is rendering as div so it's a block element. To make it inline, you can use its as property and render it as span or any other HTML element.

My screen is largesmall

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

Properties

NameTypeDefaultRequiredComment
abovesmall, medium, large-falseHidden when above screen size
belowsmall, medium, largetruefalseHidden when below screen size
asstring'div'falseTag used for rendering
childrenReactNode, ({ className }) => ReactNode-false