<> <Hidden hide={{ s: true, l: false }}>Hidden on s and m screen sizes</Hidden> <Hidden hide={{ s: false, l: true }}>Hidden on l and xl screen sizes</Hidden> </>
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 according to the passed value.
<> <Hidden hide={true}>Hidden</Hidden> <Hidden hide={false}>Shown</Hidden> </>
hide property supports responsive syntax, which means you can control the visibility based on the viewport size.
<Hidden hide={{ s: true, l: false }}>Visible on l and xl screens</Hidden>
If you need to hide an element without adding any additional wrappers, you can use the render props approach with Hidden.
<Hidden hide={{ s: true, m: false }}>{(className) => <div className={className} />}</Hidden>
If you need to keep the space for the element reserved, you can use the visibility flag to toggle CSS visibility: hidden instead of display: none.
<Hidden hide={true} visibility> With reserved space </Hidden>