React pass all events to child component

Question

Is it possible in React to pass all event to child element.

as an example I've got a custom Button class, that (simplified) looks something like this:

class Button extends Component {
  
  constructor (props) {
    super(props);

    this.onClick      = this.onClick.bind(this);
  }
  
  /* .... */
  
  onClick (ev) {
    const { disabled, onClick } = this.props;
    if (!disabled) {
      onClick(ev);
    }
  }
  
  render () {
     const {
      children,
      disabled,
      type
     } = this.props;
    
    return (
      <button
        disabled={disabled}
        onClick={this.onClick}
        ref="button"
        type={type}
      >{children}</button>
  }
  
  
}

I don't know what events i may want to use in the future (onMouseDown, onMouseUp, onBlur, onKeyDown, onTouchStart, and so on...)

Is it possible to pass all possible events to the button element without writing out a prop for every possible event?

adding {...this.props} to the button element is not what I want because it passes all props and some props (like className which is omitted in this example) should not be passed directly.

I thought about cloning the props object and deleting the props which should not be passed directly but this feels like a hack. Does anybody know a cleaner way?

Answer 1

I've taken Barry127's answer and added all the event handlers from React and put them in an object.

const acceptedEventHandlersForComponentValidationFunction = {
    clipBoard: [
        "onCopy",
        "onCut",
        "onPaste",
        "onCopyCapture",
        "onCutCapture",
        "onPasteCapture"
    ],
    composition: [
        "onCompositionEnd",
        "onCompositionStart",
        "onCompositionUpdate",
        "onCompositionEndCapture",
        "onCompositionStartCapture",
        "onCompositionUpdateCapture"
    ],
    keyboard: [
        "onKeyDown",
        "onKeyPress",
        "onKeyUp",
        "onKeyDownCapture",
        "onKeyPressCapture",
        "onKeyUpCapture"
    ],
    focus: ["onFocus", "onBlur", "onFocusCapture", "onBlurCapture"],
    form: [
        "onChange",
        "onInput",
        "onInvalid",
        "onReset",
        "onSubmit",
        "onChangeCapture",
        "onInputCapture",
        "onInvalidCapture",
        "onResetCapture",
        "onSubmitCapture"
    ],
    generic: ["onError", "onLoad", "onErrorCapture", "onLoadCapture"],
    mouse: [
        "onClick",
        "onContextMenu",
        "onDoubleClick",
        "onDrag",
        "onDragEnd",
        "onDragEnter",
        "onDragExit",
        "onDragLeave",
        "onDragOver",
        "onDragStart",
        "onDrop",
        "onMouseDown",
        "onMouseEnter",
        "onMouseLeave",
        "onMouseMove",
        "onMouseOut",
        "onMouseOver",
        "onMouseUp",
        "onClickCapture",
        "onContextMenuCapture",
        "onDoubleClickCapture",
        "onDragCapture",
        "onDragEndCapture",
        "onDragEnterCapture",
        "onDragExitCapture",
        "onDragLeaveCapture",
        "onDragOverCapture",
        "onDragStartCapture",
        "onDropCapture",
        "onMouseDownCapture",
        "onMouseMoveCapture",
        "onMouseOutCapture",
        "onMouseOverCapture",
        "onMouseUpCapture"
    ],
    pointer: [
        "onPointerDown",
        "onPointerMove",
        "onPointerUp",
        "onPointerCancel",
        "onGotPointerCapture",
        "onLostPointerCapture",
        "onPointerEnter",
        "onPointerLeave",
        "onPointerOver",
        "onPointerOut",
        "onPointerDownCapture",
        "onPointerMoveCapture",
        "onPointerUpCapture",
        "onPointerCancelCapture",
        "onGotPointerCaptureCapture",
        "onLostPointerCaptureCapture",
        "onPointerOverCapture",
        "onPointerOutCapture"
    ],
    selection: ["onSelect", "onSelectCapture"],
    touch: [
        "onTouchCancel",
        "onTouchEnd",
        "onTouchMove",
        "onTouchStart",
        "onTouchCancelCapture",
        "onTouchEndCapture",
        "onTouchMoveCapture",
        "onTouchStartCapture"
    ],
    ui: ["onScroll", "onScrollCapture"],
    wheel: ["onWheel", "onWheelCapture"],
    media: [
        "onAbort",
        "onCanPlay",
        "onCanPlayThrough",
        "onDurationChange",
        "onEmptied",
        "onEncrypted",
        "onEnded",
        "onError",
        "onLoadedData",
        "onLoadedMetadata",
        "onLoadStart",
        "onPause",
        "onPlay",
        "onPlaying",
        "onProgress",
        "onRateChange",
        "onSeeked",
        "onSeeking",
        "onStalled",
        "onSuspend",
        "onTimeUpdate",
        "onVolumeChange",
        "onWaiting",
        "onAbortCapture",
        "onCanPlayCapture",
        "onCanPlayThroughCapture",
        "onDurationChangeCapture",
        "onEmptiedCapture",
        "onEncryptedCapture",
        "onEndedCapture",
        "onErrorCapture",
        "onLoadedDataCapture",
        "onLoadedMetadataCapture",
        "onLoadStartCapture",
        "onPauseCapture",
        "onPlayCapture",
        "onPlayingCapture",
        "onProgressCapture",
        "onRateChangeCapture",
        "onSeekedCapture",
        "onSeekingCapture",
        "onStalledCapture",
        "onSuspendCapture",
        "onTimeUpdateCapture",
        "onVolumeChangeCapture",
        "onWaitingCapture"
    ],
    image: ["onLoad", "onError", "onLoadCapture", "onErrorCapture"],
    animation: [
        "onAnimationStart",
        "onAnimationEnd",
        "onAnimationIteration",
        "onAnimationStartCapture",
        "onAnimationEndCapture",
        "onAnimationIterationCapture"
    ],
    transition: ["onTransitionEnd", "onTransitionEndCapture"],
    other: ["onToggle", "onToggleCapture"]
}

/*
- Component props event handler vilidation
Return all valid events to be used on a component

{
    acceptedEventHandlerTypes: [
        "${event handler type}"
    ],
    eventHandlers: {
        ${event}: "${callback function}" // ${event} can contain "Capture" at the end to register the event handler for the capture phase
    }
}
*/
const validateComponentPropsEventHandlers = (
  acceptedEventHandlerTypes,
  eventHandlers = {}
) => {
  if (Object.keys(eventHandlers).length == 0) {
    return {}
  }

  // Fill eventsForSpecifiedType with only the required events
  let eventsForSpecifiedType = {}
  let eventsCount = 0

  for (const eventHandlerType in acceptedEventHandlerTypes) {
    if (
      acceptedEventHandlerTypes[eventHandlerType] in
      acceptedEventHandlersForComponentValidationFunction
    ) {
      const newEvents =
        acceptedEventHandlersForComponentValidationFunction[
          acceptedEventHandlerTypes[eventHandlerType]
        ]

      eventsForSpecifiedType[
        acceptedEventHandlerTypes[eventHandlerType]
      ] = newEvents

      eventsCount += newEvents.length
    }
  }

  // Fill events
  let events = {}
  let eventsCountCheck = 0

  const checkIfEventsCountHasBeenReached = () =>
    eventsCountCheck == eventsCount

  for (const eventHandler in eventHandlers) {
    if (checkIfEventsCountHasBeenReached()) {
      return events
    }

    // Append event handler to events object if it is recognised
    Object.values(eventsForSpecifiedType).forEach(
      (EVENT_HANDLERS) => {
        if (
          EVENT_HANDLERS.includes(eventHandler) &&
          !(eventHandler in events)
        ) {
          events[eventHandler] = eventHandlers[eventHandler]

          eventsCountCheck += 1
        }

        if (checkIfEventsCountHasBeenReached()) {
          return events
        }
      }
    )
  }

  return events
}

// Usage
const test = () => {console.log("test")}
const events = validateComponentPropsEventHandlers(["mouse"], { onClick: test })
console.log(events)
// <button {...events}>Button</button>

Answer 2

I've written a function to iterate over the props and filter out all properties starting with 'on' this is the closest I've come so far. In case it helps anyone else:

/* helpers.js */

export function filterEvents (props, ignore = []) {
  let events = {};
  for (let property in props) {
    if (props.hasOwnProperty(property)) {
      if (property.startsWith('on') && ignore.indexOf(property) === -1) {
        events[property] = props[property];
      }
    }
  }

  return events;
}

/* Tests for the filterEvents */
  
import { expect } from 'chai';

import { filterEvents } from './helpers';

describe('filterEvents', () => {

  const props = {
    className: 'someClass',
    disabled: true,
    onBlur: 'onBlur',
    onClick: 'onClick',
    onMouseDown: 'onMouseDown',
    onMouseUp: 'onMouseUp'
  };

  it('only returns keys starting with on', () => {
    const expected = {
      onBlur: 'onBlur',
      onClick: 'onClick',
      onMouseDown: 'onMouseDown',
      onMouseUp: 'onMouseUp'
    };

    expect(filterEvents(props)).to.deep.equal(expected);
  });

  it('only returns keys starting with on minus the ones in the ignore array', () => {
    const expected = {
      onBlur: 'onBlur',
      onMouseUp: 'onMouseUp'
    };

    const ignore = ['onClick', 'onMouseDown'];
    expect(filterEvents(props, ignore)).to.deep.equal(expected);
  });

});


/* Using the function inside a component */

import { filterEvents } from './helpers'; //at the top of the components file

//Inside the render method:

const events = filterEvents(this.props, ['onClick']); //don't include onClick it's handled like the questions example

return (
  <button
    disabled={this.props.disabled}
    onClick={this.onClick}
    {...events}
  >
    {this.props.children}
  </button>
);