@navinc/base-react-components
Version:
Nav's Pattern Library
27 lines • 918 B
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMediaQuery } from '../../use-media-query.js';
/**
* 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 const conditionalComponentOnMediaQuery = (mediaQuery, TruthyComponent, FalsyComponent) => (props) => {
const isTruthy = useMediaQuery(mediaQuery);
return isTruthy ? _jsx(TruthyComponent, Object.assign({}, props)) : _jsx(FalsyComponent, Object.assign({}, props));
};
//# sourceMappingURL=conditional-component-on-media-query.js.map