Creating a React Custom Element Wrapper Generator

Web Components

Observing Props

Defining The Custom Element Wrapper Generator

export const defineReactComponent = (Component, name) => {
  • We set the observed attributes array at the beginning of the function.
  • The generateAllProps function will be responsible to copy all the attributes to the props object which is passed to the React component. This solution is naive and isn’t covering things like data structures or functions. I’ll give you the opportunity to continue from here and build a more robust solution.




Hardcore web developer, @sparXys CEO, Google Web Technologies GDE, Microsoft MVP, Pro SPA Development co-author, husband, dad and a geek.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store