import React from "react";
declare function joinNodes(nodes: React.ReactNode[], separator: React.ReactElement | string, outerJoin?: boolean): React.ReactElement;
/**
 * For React Native UI, parameters must be Text-based node
 * Currently, only support placeholders {1} {2} in sequence
 *
 * E.g: interpolateNode("Dice {1} Prize {2}", <Dice value={6}/>, <Amount value={3.5}/>)
 */
declare function interpolateNode(text: string, ...parameters: React.ReactElement[]): React.ReactElement;
/**
 * Similar to React.memo, differences are:
 * - Preserves the generic of component props if there are any
 * - Adds a parameter to assign displayName to component
 *
 * Example usage:
 *   interface Props<T extends string> {
 *       tabs: ReadonlyArray<TabType<T>>;
 *   }
 *   export const Tabs = ReactUtil.memo("Tabs", function<T extends string>(props: Props<T>) { .... });
 */
declare function memo<T extends React.FunctionComponent<any>>(displayName: string, functionComponent: T): T;
/**
 * To group some components into a static-method like usage, without creating dummy class.
 *
 * Example usage:
 *    const Left = ReactUtil.memo("Left", () => {...});
 *    const Right = ReactUtil.memo("Left", () => {...});
 *    const SomeContainer = ReactUtil.statics("SomeContainer", {Left, Right})
 *
 * Then you can use <SomeContainer.Left> or <SomeContainer.Right> with proper displayName set.
 */
declare function statics<T extends {
    [key: string]: React.ComponentType<any> | {
        [key: string]: React.ComponentType<any>;
    };
}>(displayName: string, componentMap: T): T;
/**
 * Builds a compound component by attaching sub-components to a main component.
 *
 * Example usage:
 *    const SubComponent1 = ReactUtil.memo("SubComponent1", (props) => {...});
 *    const SubComponent2 = ReactUtil.statics("SubComponent2", {SubComponent21, SubComponent22});
 *    const MainComponent = ReactUtil.compound("MainComponent", {SubComponent1, SubComponent2}, (props) => {...});
 *
 * Example usage 2:
 *    const MainComponent = compound("MainComponent", {SubComponent1: props => <div />, SubComponent2: props => <div />}, props => <div />);
 *
 * It will automatically memoize the sub-components if they are not already memoized with ReactUtil.memo.
 * Then you can use <MainComponent> or <MainComponent.SubComponent1> or <MainComponent.SubComponent2> with proper displayName set.
 */
declare function compound<T extends React.FunctionComponent<any>, TCMap extends {
    [key: string]: React.ComponentType<any> | {
        [key: string]: React.ComponentType<any>;
    };
}>(displayName: string, componentMap: TCMap, component: T): T & TCMap;
export declare const ReactUtil: Readonly<{
    joinNodes: typeof joinNodes;
    interpolateNode: typeof interpolateNode;
    memo: typeof memo;
    statics: typeof statics;
    compound: typeof compound;
}>;
export {};