@ffsm/compositor/dist/as-slot.d.ts

A collection of declarative React utility components for simplified component composition, conditional rendering, and prop management - making React UI development more maintainable and expressive.

import { PropsWithChildren, ReactNode } from 'react';
import { ObjectProps, RenderFunction } from './types';
export type AsSlotProps<Props extends ObjectProps> = {
    outlet?: ReactNode | RenderFunction<Props>;
    outletProps?: ObjectProps;
} & ObjectProps;
/**
 * A component that implements slot-based composition, allowing children to be rendered
 * within an outlet component or render function.
 *
 * @template Props - The type of props that can be passed to the outlet
 * @param {PropsWithChildren<AsSlotProps<Props>>} props - Component properties
 * @param {React.ReactNode} props.children - The content to be rendered inside the outlet
 * @param {React.ReactNode | RenderFunction<Props>} [props.outlet] - The wrapper component or render function
 * @param {ObjectProps} [props.outletProps] - Additional props to pass to the outlet component
 * @param {...ObjectProps} props.rest - Additional props passed to children via AsInstance
 * @returns {JSX.Element} The composed component hierarchy
 *
 * @example
 * // Basic usage with an outlet component
 * <AsSlot outlet={<Card />}>
 *   <p>This content will be rendered inside the Card</p>
 * </AsSlot>
 *
 * @example
 * // With outlet props
 * <AsSlot
 *   outlet={<Panel />}
 *   outletProps={{ title: "User Settings", elevated: true }}
 * >
 *   <UserPreferences />
 * </AsSlot>
 *
 * @example
 * // With a render function
 * <AsSlot
 *   outlet={(props) => <Dialog open={isOpen} {...props} />}
 *   className="dialog-content"
 * >
 *   <h2>Confirm Action</h2>
 *   <p>Are you sure you want to continue?</p>
 * </AsSlot>
 */
export declare function AsSlot<Props extends ObjectProps>(props: PropsWithChildren<AsSlotProps<Props>>): import("react/jsx-runtime").JSX.Element;