var Component=(()=>{var s=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),b=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},h=(r,e,o,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of m(e))!x.call(r,i)&&i!==o&&t(r,i,{get:()=>e[i],enumerable:!(d=p(e,i))||d.enumerable});return r};var g=(r,e,o)=>(o=r!=null?s(u(r)):{},h(e||!r||!r.__esModule?t(o,"default",{value:r,enumerable:!0}):o,r)),k=r=>h(t({},"__esModule",{value:!0}),r);var a=w((q,c)=>{c.exports=_jsx_runtime});var y={};b(y,{default:()=>v,frontmatter:()=>j});var n=g(a()),j={id:"show-hide",category:"other",title:"Show / Hide",package:"@chakra-ui/media-query",description:"Show and Hide wrapper components render or not render the child elements if the media query matches."};function l(r){let e=Object.assign({h2:"h2",pre:"pre",code:"code",ul:"ul",li:"li",strong:"strong",h3:"h3",p:"p",blockquote:"blockquote"},r.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Show, Hide } from '@chakra-ui/react' `})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Show"}),": Show the children if the media query matches."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.strong,{children:"Hide"}),": Hide the children if the media query matches."]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.h3,{id:"breakpoint-prop",children:"Breakpoint Prop"}),` `,(0,n.jsxs)(e.p,{children:["Use the ",(0,n.jsx)(e.code,{children:"breakpoint"})," prop to pass in a custom query."]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:` This text appears only on screens 400px and smaller. `})}),` `,(0,n.jsx)(e.h3,{id:"above--below",children:"Above / Below"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"above"})," and ",(0,n.jsx)(e.code,{children:"below"})," props receive the Chakra theme's breakpoint keys."]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"above"}),' is similar to "min-width"']}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"below"}),' is similar to "max-width"']}),` `]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`<> This text appears at the "sm" value screen width or greater. This text hides at the "md" value screen width and smaller. `})}),` `,(0,n.jsxs)(e.blockquote,{children:[` `,(0,n.jsxs)(e.p,{children:["Note: You can not combine ",(0,n.jsx)(e.code,{children:"above"})," and ",(0,n.jsx)(e.code,{children:"below"})," props"]}),` `]})]})}function f(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(l,r)})):l(r)}var v=f;return k(y);})(); ;return Component;

Show / Hide

Props#

Props#