@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
67 lines (66 loc) • 1.96 kB
TypeScript
import React, { HTMLAttributes } from "react";
import { BreakpointsAlias } from "../utilities/types";
export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
/**
* Will show/hide element above breakpoint (inclusive)
*/
above?: Exclude<BreakpointsAlias, "xs">;
/**
* Will show/hide element below breakpoint (inclusive)
*/
below?: Exclude<BreakpointsAlias, "xs">;
/**
* Overrides html-tag
* @default "div"
*/
as?: "div" | "span";
/**
* When true, will render element as its child. This merges classes, styles and event handlers.
*/
asChild?: boolean;
}
/**
* Responsive view Primitive to show/hide elements based on breakpoints
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hide)
* @see 🏷️ {@link ResponsiveProps}
*
* @example
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
* <div/>
* <Hide below="md" asChild>
* // Only visible above "md"
* </Hide>
* </HGrid>
* @example
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
* <div/>
* <Hide above="md" asChild>
* // Only visible below "md"
* </Hide>
* </HGrid>
*/
export declare const Hide: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;
/**
* Responsive view Primitive to show/hide elements based on breakpoints
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/show)
* @see 🏷️ {@link ResponsiveProps}
*
* @example
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
* <div/>
* <Show below="md" asChild>
* // Only visible below "md"
* </Show>
* </HGrid>
* @example
* <HGrid columns={{ xs: 1, md: 2 }} gap="4">
* <div/>
* <Show above="md" asChild>
* // Only visible above "md"
* </Show>
* </HGrid>
*/
export declare const Show: React.ForwardRefExoticComponent<ResponsiveProps & React.RefAttributes<HTMLDivElement>>;