Media
Media는 CSS media query match에 따라 children을 렌더링합니다. render prop이면 matches boolean을 받고, 아니면 query가 match할 때 children, 아닐 때 fallback을 렌더링합니다.
import { Media } from '@ilokesto/utilinent';
<Media query="(min-width: 768px)">{(matches) => matches ? <Desktop /> : <Mobile />}</Media>
<Media query="(min-width: 768px)" fallback={<MobileNav />}><DesktopNav /></Media>프로퍼티
| Prop | Type | 설명 |
|---|---|---|
query | string | CSS media query 문자열입니다. |
children | ReactNode | (matches) => ReactNode | content 또는 render prop입니다. |
fallback | ReactNode | query가 match하지 않을 때 렌더링됩니다(render prop 미사용 시). 기본값은 null입니다. |