@navinc/base-react-components
Version:
Nav's Pattern Library
23 lines (22 loc) • 748 B
TypeScript
import { ComponentType, JSX } from 'react';
/**
* create a component that renders one of two components depending on the result of a media query
*
* @example
* ```
* const blue = styled.div`
* background-color: blue;
* `
* const red = styled.div`
* background-color: red;
* `
* const ConditionalComponent = conditionalComponentOnMediaQuery(
* '(min-width: 600px)',
* blue,
* red
* )
*
* <ConditionalComponent /> // renders blue if the screen is wider than 600px, red otherwise
* ```
*/
export declare const conditionalComponentOnMediaQuery: <T extends JSX.IntrinsicAttributes>(mediaQuery: string, TruthyComponent: ComponentType<T>, FalsyComponent: ComponentType<T>) => (props: T) => import("react/jsx-runtime").JSX.Element;