How does react map props to dom internally?

[lifeiscontent]

Hi, I'm working on a library that proxy's SVG elements so you can mutate the SVG Element when it has loaded.

https://github.com/lifeiscontent/react-svg-injector

I noticed that when I added an onClick prop to my Mutate component it didn't map properly as in javascript the proper syntax is onclick.

Here is where the code I'm working on lives: https://github.com/lifeiscontent/react-svg-injector/blob/master/lib/mutate.js#L17

I'm wondering how ReactDOM does this internally so I can have a consistent API with my library.

any support on this topic is greatly appreciated, thanks!

[gaearon]

Does this help?

https://reactjs.org/docs/dom-elements.html

In general React always uses camelCase convention.

[lifeiscontent]

@gaearon yeah, I understand that JSX uses camelCase, but what code in the react library does the mapping of the camelCase props to javascript/dom elements? If you look at the code I've pointed to, its working with real dom nodes, but if there is a way where I can use react instead of the dom, that'd be even better but I'm currently not sure how I could do that.

[gaearon]

There is a mapping between DOM events and names but it's kind of scattered around the library right now, and there's no easy snippet to cut and paste.

[lifeiscontent]

@gaearon can you point me to a few of the files these are defined in?

[gaearon]

Here's some events that get their first letter capitalized with on added in front:

react/packages/react-dom/src/events/SimpleEventPlugin.js

Lines 55 to 119 in c78db58

	'abort',
	'animationEnd',
	'animationIteration',
	'animationStart',
	'blur',
	'cancel',
	'canPlay',
	'canPlayThrough',
	'click',
	'close',
	'contextMenu',
	'copy',
	'cut',
	'doubleClick',
	'drag',
	'dragEnd',
	'dragEnter',
	'dragExit',
	'dragLeave',
	'dragOver',
	'dragStart',
	'drop',
	'durationChange',
	'emptied',
	'encrypted',
	'ended',
	'error',
	'focus',
	'input',
	'invalid',
	'keyDown',
	'keyPress',
	'keyUp',
	'load',
	'loadedData',
	'loadedMetadata',
	'loadStart',
	'mouseDown',
	'mouseMove',
	'mouseOut',
	'mouseOver',
	'mouseUp',
	'paste',
	'pause',
	'play',
	'playing',
	'progress',
	'rateChange',
	'reset',
	'scroll',
	'seeked',
	'seeking',
	'stalled',
	'submit',
	'suspend',
	'timeUpdate',
	'toggle',
	'touchCancel',
	'touchEnd',
	'touchMove',
	'touchStart',
	'transitionEnd',
	'volumeChange',
	'waiting',
	'wheel',

There's more you can find if you search for top* in the code. Some are here: https://github.com/facebook/react/blob/master/packages/react-dom/src/events/BrowserEventConstants.js

But there is more.

[lifeiscontent]

@gaearon thanks for the help, quick question. how do you inline code like that in GitHub? or where are the docs that describe that functionality?

[gaearon]

Just paste a link to specific lines and it'll be inlined. You can take a link to specific lines by clicking on the start line in the file source view. (and shift+clicking to choose the end line)