@retailmenot/anchor/ts/Adapt/Adapt.component.d.ts

A React UI Library by RetailMeNot

import * as React from 'react';
import { LayoutProps, SpaceProps } from '@xstyled/system';
interface ForEach {
    [k: string]: any;
}
interface AdaptProps extends React.HTMLAttributes<HTMLDivElement>, LayoutProps, SpaceProps {
    className?: string;
    forEach: ForEach;
    children: (value: any, breakpoint: string) => JSX.Element | React.ReactElement;
}
/**
 * The purpose of Adapt is to display different content for different breakpoints.
 * It accomplishes this via media queries and display: none. It expects a forEach
 * prop object with values mapped to different breakpoints and children as a render
 * prop. It then renders the child function for each breakpoint, passing in the
 * associated value and the breakpoint as the first two arguments.
 *
 * Example usage:
 * <Adapt forEach={{ xs: 'apple', md: 'banana' }}>
 *   {(value, breakpoint) => (
 *     <p>
 *       {value}
 *     </p>
 *   )}
 * </Adapt>
 *
 * =>
 *   <p>apple</p>  // displays below md breakpoint
 *   <p>banana</p>  // displays at and above md breakpoint
 */
export declare const Adapt: {
    ({ className, children, forEach, ...props }: AdaptProps): React.ReactElement<AdaptProps>;
    displayName: string;
};
export {};