How to convert a "raw" DOM Event to a React SyntheticEvent?

Question

I use two libraries, one library which emits "raw" DOM events (lib.dom.d.ts), and one other library which consumes React.SyntheticEvents.

What is the best way to cleanly transform the raw event into a SyntheticEvent?

Answer 1

This is not a direct answer, but it's too long to comment.

I don't think it is a good practice of trying to wrap/convert a DOM event to a React.SyntheticEvent. And I can't see there is a user case of rendering with non-React but responding the events with React. Perhaps you need to consider choosing another consumption library. Simply speaking, no direct way to construct a SyntheticEvent from a DOM event.

From https://reactjs.org/docs/events.html SyntheticEvent is a high level API of wrapping the basic DOM event. The goal of wrapping the basic DOM event with some logic is having the events working identically cross-browser.

Although from https://github.com/facebook/react/blob/993ca533b42756811731f6b7791ae06a35ee6b4d/packages/react-dom/src/events/plugins/SelectEventPlugin.js or https://github.com/facebook/react/blob/9198a5cec0936a21a5ba194a22fcbac03eba5d1d/packages/react-dom/src/events/plugins/ChangeEventPlugin.js , you can find some clue of how to construct a SyntheticEvent, the work is not only constructing the SyntheticEven, but also other logic React has done and which your consumption library relies. If you construct a SyntheticEvent by yourself, then you also need to write the logic to meet the expectation.