@base-ui-components/react/cjs/utils/useComponentRenderer.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import type { ComponentRenderFn } from './types.js';
import { CustomStyleHookMapping } from './getStyleHookProps.js';
import { defaultRenderFunctions } from './defaultRenderFunctions.js';
export interface ComponentRendererSettings<State, RenderedElementType extends Element> {
    /**
     * The class name to apply to the rendered element.
     * Can be a string or a function that accepts the state and returns a string.
     */
    className?: string | ((state: State) => string);
    /**
     * The render prop or React element to override the default element.
     */
    render: ComponentRenderFn<React.HTMLAttributes<any>, State> | React.ReactElement<Record<string, unknown>> | keyof typeof defaultRenderFunctions;
    /**
     * The state of the component.
     */
    state: State;
    /**
     * The ref to apply to the rendered element.
     */
    ref?: React.Ref<RenderedElementType>;
    /**
     * A function that returns props for the rendered element.
     * It should accept and merge additional props.
     */
    propGetter?: (externalProps: Record<string, any>) => React.HTMLAttributes<any> & React.RefAttributes<RenderedElementType>;
    /**
     * Additional props to be spread on the rendered element.
     */
    extraProps?: Record<string, any>;
    /**
     * A mapping of state to style hooks.
     */
    customStyleHookMapping?: CustomStyleHookMapping<State>;
}
/**
 * Returns a function that renders a Base UI component.
 *
 * @ignore - internal hook.
 */
export declare function useComponentRenderer<State extends Record<string, any>, RenderedElementType extends Element>(settings: ComponentRendererSettings<State, RenderedElementType>): {
    renderElement: () => React.ReactElement<Record<string, unknown>, string | React.JSXElementConstructor<any>>;
};