[useRenderer] Add public hook

packages/react/package.json

@@ -56,6 +56,7 @@
     "./tooltip": "./src/tooltip/index.ts",
     "./unstable-no-ssr": "./src/unstable-no-ssr/index.ts",
     "./unstable-use-media-query": "./src/unstable-use-media-query/index.ts",
+    "./use-renderer": "./src/use-renderer/index.ts",
     "./utils": "./src/utils/index.ts"
   },
   "imports": {

packages/react/src/index.ts

@@ -25,3 +25,4 @@ export * from './tabs';
 export * from './toggle';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './use-renderer';

packages/react/src/use-renderer/index.ts

@@ -0,0 +1 @@
+export { useRenderer } from './useRenderer';

packages/react/src/use-renderer/useRenderer.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { ComponentRenderFn } from '../utils/types';
+import { useComponentRenderer } from '../utils/useComponentRenderer';
+import { defaultRenderFunctions } from '../utils/defaultRenderFunctions';
+
+/**
+ * Returns a function that renders a Base UI component.
+ */
+export function useRenderer<State extends Record<string, any>, RenderedElementType extends Element>(
+  settings: useRenderer.Settings<State, RenderedElementType>,
+) {
+  return useComponentRenderer(settings);
+}
+
+namespace useRenderer {
+  export interface Settings<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. It will be used as a parameter for the render and className callbacks.
+     */
+    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>;
+  }
+}