FrameworkStyle

mergeProps

Utility for merging multiple React props objects with smart event handler chaining

Import 

import { mergeProps } from '@videojs/react';

Usage

mergeProps merges multiple props objects with intelligent handling for event handlers, className, and style:

  • Event handlers (on*): chained — earlier handlers run first
  • className : concatenated with a space
  • style : shallow-merged, later values override conflicts
  • Other props : last value wins 
import { mergeProps } from '@videojs/react';

const internalProps = {
  onClick: () => console.log('internal'),
  className: 'base',
  style: { color: 'red' },
};

const externalProps = {
  onClick: () => console.log('external'),
  className: 'custom',
  style: { fontWeight: 'bold' },
};

const merged = mergeProps(internalProps, externalProps);
// Result:
// - onClick: calls external handler, then internal handler
// - className: 'base custom'
// - style: { color: 'red', fontWeight: 'bold' }

This is used internally by useButton and renderElement to merge component props with user-provided overrides. It accepts undefined entries, which are safely skipped.

Examples

Basic Usage

Base handler
0
External handler
0
 
import { mergeProps } from '@videojs/react';
import { useState } from 'react';

import './BasicUsage.css';

export default function BasicUsage() {
  const [baseCount, setBaseCount] = useState(0);
  const [externalCount, setExternalCount] = useState(0);

  const baseProps = {
    onClick: () => setBaseCount((c) => c + 1),
    className: 'react-merge-props-basic__base',
    style: { color: '#1e40af' },
  };

  const externalProps = {
    onClick: () => setExternalCount((c) => c + 1),
    className: 'react-merge-props-basic__external',
    style: { fontWeight: 'bold' as const },
  };

  const merged = mergeProps(baseProps, externalProps);

  return (
    <div className="react-merge-props-basic">
      <button {...merged} type="button">
        Click me
      </button>
      <dl className="react-merge-props-basic__counts">
        <div>
          <dt>Base handler</dt>
          <dd>{baseCount}</dd>
        </div>
        <div>
          <dt>External handler</dt>
          <dd>{externalCount}</dd>
        </div>
      </dl>
    </div>
  );
}

API Reference

Parameters

Parameter Type Default
propSets* (ComponentPropsWithRef<ElementType> | undefined)[] —

Return Value

ComponentPropsWithRef<ElementType>

VideoJS