Hidden: React
Hide content if the screen size matches the applied breakpoint (or another media query).
Installation
Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.
With that done, you’re now ready to implement the component in your application.
import { Hidden } from '@mediahuis/chameleon-react';
export default function Example() {
return <Hidden above="xs">Hidden above xs.</Hidden>;
}
Properties
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
above | 'xs' | 'sm' | 'md' | 'lg' | - | No | Determines the breakpoint above which the component will be hidden. |
as | ElementType | - | No | Allows changing the rendered HTML element. |
children | ReactNode | - | No | The content of the component. |
below | 'sm' | 'md' | 'lg' | 'xl' | - | No | Determines the breakpoint below which the component will be hidden. |
className | String | - | No | Allows extending the class names of the component. |
print | Boolean | - | No | Determines whether the component will be hidden on print. |
screen | Boolean | - | No | Determines whether the component will be hidden on screen. |