@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
25 lines (24 loc) • 1.02 kB
TypeScript
import { PropsWithChildren } from "react";
export type BreakpointValue = BreakpointProps["from"];
export type BreakpointProps = PropsWithChildren<{
/** Content will only be displayed for screens wider than `from` */
from?: "small" | "medium" | "large" | "xl" | "xxl";
/** Content will only be displayed for screens narrower than `to` */
to?: "small" | "medium" | "large" | "xl" | "xxl";
}>;
/** Element that will only be displayed for certain screen sizes:
*
* - small = 600px
* - medium = 960px
* - large = 1280px
* - xl = 1600px
* - xxl = 1920px
*
* @see https://bifrost.intility.com/react/breakpoint
*
* @example
* <Breakpoint to='small'>displayed up to small (0px-599px)</Breakpoint>
* <Breakpoint from='small' to='medium'>displayed between small and medium (600px-959px)</Breakpoint>
* <Breakpoint from='medium'>displayed for medium and larger (960px +)</Breakpoint>
*/
export default function Breakpoint({ children, from, to }: BreakpointProps): import("react/jsx-runtime").JSX.Element;