);
}
function HeartFilledIcon(props: JSX.IntrinsicElements['svg']) {
return (
);
}
function HeartOutlineIcon(props: JSX.IntrinsicElements['svg']) {
return (
);
}
```
When using the function form of the `render` prop, props are not merged automatically.
You can use `mergeProps` to combine Base UI's props with your own, and call `preventBaseUIHandler()` to stop Base UI's internal logic from running:
## Passing a function instead of an object
Each argument can be a props object or a function that receives the merged props up to that point (left to right) and returns a props object.
This is useful when you need to compute the next props from whatever has already been merged.
Note that the function's return value completely replaces the accumulated props up to that point.
If you want to chain event handlers from the previous props, you must call them manually:
```tsx title="Manually chaining handlers in a function"
const merged = mergeProps(
{
onClick(event) {
// Handler from previous props
},
},
(props) => ({
onClick(event) {
// Manually call the previous handler
props.onClick?.(event);
// Your logic here
},
}),
);
```
## API reference
### makeEventPreventable
**makeEventPreventable Props:**
| Name | Type | Default | Description |
| ----- | ------------------ | ------- | ----------- |
| event | BaseUIEvent | - | - |
#### makeEventPreventable
```typescript
type ReturnValue = BaseUIEvent;
```
### mergeClassNames
Merge Solid class values into a class array.
**mergeClassNames Props:**
| Name | Type | Default | Description |
| -------------- | -------------- | ------- | --------------------- |
| ourClassName | JSX.ClassValue | - | Internal class value. |
| theirClassName | JSX.ClassValue | - | External class value. |
#### Return value
```typescript
type ReturnValue = JSX.ClassValue;
```
### mergeProps
Merges multiple sets of Solid props. It follows the Object.assign pattern where the rightmost object's fields overwrite
the conflicting ones from others. This doesn't apply to event handlers, `class` and `style` props.
Event handlers are merged and called in right-to-left order (rightmost handler executes first, leftmost last).
For native DOM events, the rightmost handler can prevent prior (left-positioned) handlers from executing
by calling `event.preventBaseUIHandler()`. For non-DOM events (custom events with primitive/object values),
all handlers always execute without prevention capability.
The `class` prop is merged as Solid class values in an array.
The `style` prop is merged with rightmost styles overwriting the prior ones.
Props can either be provided as objects or as functions that take the previous props as an argument.
The function will receive the merged props up to that point (going from left to right):
so in the case of `(obj1, obj2, fn, obj3)`, `fn` will receive the merged props of `obj1` and `obj2`.
The function is responsible for chaining event handlers if needed (that is, we don't run the merge logic).
Event handlers returned by the functions are not automatically prevented when `preventBaseUIHandler` is called.
They must check `event.baseUIHandlerPrevented` themselves and bail out if it's true.
Refs are composed into an array. Children are forwarded lazily. Call mergeProps in a reactive scope for updated values.
**mergeProps Props:**
| Name | Type | Default | Description |
| ---- | ------------- | ------- | ---------------------------------------------------------------------------------------------- |
| a | InputProps | - | Props object to merge. |
| b | InputProps | - | Props object to merge. The function will overwrite conflicting props from `a`. |
| c? | InputProps | - | Props object to merge. The function will overwrite conflicting props from previous parameters. |
| d? | InputProps | - | Props object to merge. The function will overwrite conflicting props from previous parameters. |
| e? | InputProps | - | Props object to merge. The function will overwrite conflicting props from previous parameters. |
#### Return value
```typescript
type ReturnValue = WithBaseUIEvent;
```
### mergePropsN
Merges an arbitrary number of Solid props using the same logic as [`mergeProps`](#mergeprops).
This function accepts an array of props instead of individual arguments.
This has slightly lower performance than [`mergeProps`](#mergeprops) due to accepting an array
instead of a fixed number of arguments. Prefer [`mergeProps`](#mergeprops) when merging 5 or
fewer prop sets for better performance.
**mergePropsN Props:**
| Name | Type | Default | Description |
| ----- | ---------------- | ------- | ------------------------ |
| props | InputProps\[] | - | Array of props to merge. |
#### Return value
```typescript
type ReturnValue = WithBaseUIEvent;
```
This function accepts up to 5 arguments, each being either a props object or a function that returns a props object.
If you need to merge more than 5 sets of props, use `mergePropsN` instead.
This function accepts an array of props objects or functions that return props objects.
It is slightly less efficient than `mergeProps`, so only use it when you need to merge more than 5 sets of props.