react-slottable
Version: 
Package that allows to turn react components into slottable ones
13 lines (12 loc) • 2.68 kB
TypeScript
import { ReactNode } from 'react';
/**
 * Hook that returns slot outlet components, basing on passed slot names array.
 * @param {readonly string[]} names array of slot names that you want to use within your main component
 * @returns {Record<Slot, ComponentType<SlotsProps[Slot]>>} object of components with dynamically generated names that are slot outlets to use in main component
 */
declare const useSlots: <Slot extends string, SlotsProps extends Record<Slot, {
    children?: ReactNode;
}> = Record<Slot, {
    children?: ReactNode;
}>>(names: readonly Slot[]) => { [SlotName in keyof SlotsProps & string as Capitalize<(SlotName extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${any}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : SlotName) extends infer T_1 ? T_1 extends (SlotName extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${U extends `${infer T}-${infer U}` ? `${T}_${any}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : U}` : SlotName) ? T_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<U_1 extends `${infer T_2}_${infer U_1}` ? `${T_2}${Capitalize<any>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : U_1>}` : T_1 : never : never>]: (props: SlotsProps[SlotName]) => JSX.Element; };
export default useSlots;