react-grid-system/index.d.ts

A powerful Bootstrap-like responsive grid system for React.

declare module 'react-grid-system' {
    import * as React from 'react';

    type Align = 'normal' | 'start' | 'center' | 'end' | 'stretch'
    type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'initial' | 'inherit';
    type Direction = 'column' | 'row' | 'column-reverse' | 'row-reverse'
    type Wrap = 'nowrap' | 'wrap' | 'reverse';
    type ScreenClass = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'| 'xxxl';
    type ScreenClassMap<T> = Partial<Record<ScreenClass, T>>;

    type Offsets = ScreenClassMap<number>;
    type Orders = ScreenClassMap<number>;
    type Push = ScreenClassMap<number>;
    type Pull = ScreenClassMap<number>;

    type ColProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
        width?: "auto" | number | string,
        debug?: boolean,
        offset?: Offsets,
        order?: Orders,
        push?: Push,
        pull?: Pull,
        style?: object,
        component?: (() => string) | string
    } & ScreenClassMap<number | "content">;

    type ContainerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
        fluid?: boolean,
        style?: object,
        component?: (() => string) | string
    } & ScreenClassMap<boolean>;

    type RowProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
        align?: Align,
        justify?: Justify,
        direction?: Direction,
        wrap?: Wrap,
        debug?: boolean,
        style?: object,
        nogutter?: boolean,
        component?: (() => string) | string,
        gutterWidth?: number
    }

    type ClearFixProps = { children: React.ReactNode } & ScreenClassMap<boolean>;
    type VisibleProps = { children: React.ReactNode } & ScreenClassMap<boolean>;
    type HiddenProps = { children: React.ReactNode } & ScreenClassMap<boolean>;

    type ScreenClassRenderProps = {
        render?: (screenClass: ScreenClass) => Exclude<React.ReactNode, undefined>
    }

    type Configuration = {
        breakpoints?: Array<number>,
        containerWidths?: Array<number>,
        gutterWidth?: number,
        gridColumns?: number,
        defaultScreenClass?: ScreenClass,
        maxScreenClass?: ScreenClass
    }

    type ScreenClassProviderProps = {
        children: React.ReactNode,
        fallbackScreenClass?: ScreenClass,
        useOwnWidth?: boolean
    }

    export function setConfiguration(configuration: Configuration): void
    export function useScreenClass(elementRef?: React.MutableRefObject<any>): ScreenClass

    export class Col extends React.Component<ColProps, any> { }
    export class Container extends React.Component<ContainerProps, any> { }
    export class Row extends React.Component<RowProps, any> { }
    export class ClearFix extends React.Component<ClearFixProps, any> { }
    export class Hidden extends React.Component<HiddenProps, any> { }
    export class ScreenClassRender extends React.Component<ScreenClassRenderProps, any> { }
    export class Visible extends React.Component<VisibleProps, any> { }
    export class ScreenClassProvider extends React.Component<ScreenClassProviderProps, any> { }
}