# mergeProps

Utility for combining React props with predictable handler, class, and style precedence

## Import

```tsx
import { mergeProps } from "@videojs/react";
```

## Usage

Pass props in increasing precedence order. Event handlers run right to left, class names concatenate right to left, and rightmost style and other prop values win conflicts.

```tsx
const props = mergeProps(
  { className: "base", onClick: logInternal },
  { className: "custom", onClick: onClick, style: { color: "red" } },
);

return <button {...props}>Play</button>;
```

`mergeProps` does not compose refs; a rightmost `ref` replaces earlier refs. Use `useComposedRefs` when every ref needs the element.

## API Reference

`mergeProps<T extends ElementType>(...propSets): ComponentPropsWithRef<T>`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `propSets` | `(ComponentPropsWithRef<T> \| undefined)[]` | — | Props objects to merge in order. |

### Return Value

`ComponentPropsWithRef<T>`

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt