Files
v10/dist/dev/utils/use-render.d.ts

44 lines
1.8 KiB
TypeScript

import { RenderProp } from "./types.js";
import { StateAttrMap } from "@videojs/core/dom";
import { CSSProperties, ReactElement, Ref } from "react";
//#region src/utils/use-render.d.ts
type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
interface UseRenderComponentProps<State> {
className?: string | ((state: State) => string | undefined) | undefined;
style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;
render?: RenderProp<State> | undefined;
}
interface UseRenderParameters<State, RenderedElementType extends Element> {
state: State;
ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;
props?: object | object[] | undefined;
stateAttrMap?: StateAttrMap<State> | undefined;
}
/**
* Render a UI component element.
*
* Handles:
* - Default tag rendering
* - Render prop (element or function)
* - Props merging (event handlers chained, className concatenated, style merged)
* - Ref composition
* - className/style as functions of state
*
* @public
* @example
* ```tsx
* return renderElement('button', componentProps, {
* state,
* ref: [forwardedRef, buttonRef],
* props: [{ type: 'button' }, elementProps, getButtonProps],
* });
* ```
*/
declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
declare namespace renderElement {
type ComponentProps<State> = UseRenderComponentProps<State>;
type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;
}
//#endregion
export { UseRenderComponentProps, UseRenderParameters, renderElement };
//# sourceMappingURL=use-render.d.ts.map