azure-devops-ui/Components/ResponsiveViewport/ResponsiveViewport.Props.d.ts

React components for building web UI in Azure DevOps

import * as React from "react";
export interface IBreakPoint {
    /**
     * If set, the breakpoint is only active if the width of the element is greater than the given value
     **/
    minWidth?: number;
    /**
     * If set, the breakpoint is only active if the width of the element is less than or equal to the given value
     *
     * Note: this is different than standard CSS @media query behavior to deal with non-integer widths
     **/
    maxWidth?: number;
    /**
     * Name of class to apply if breakpoint is active
     **/
    className: string;
}
export interface IResponsiveViewportProps<T extends IBreakPoint = IBreakPoint> {
    /** Name of the tag used to create the wrapper element */
    tag?: string;
    /** Optional class name to apply to wrapper element */
    className?: string;
    /** List of breakpoints */
    breakPoints: ReadonlyArray<T>;
    /** Optional initialWidth to compute initial breakpoints */
    initialWidth?: number;
    /** Optional callback to get a reference to the viewport once mounted */
    componentRef?: (ref: IResponsiveViewport) => void;
    /** Optional callback to render the content, by default  */
    onRenderContent?: (activeBreakPoints: T[]) => React.ReactNode;
}
export interface IResponsiveViewport {
    /** Measure current size and update breakpoints accordingly */
    measure(): void;
}