0

These are the problems that I have faced yet:

  1. Integration: I tried integrating Stencil and React as stated on the official Stencil website. It turned out that I have to build my Stencil component before adding it to my App and I need to copy it to the node_modules or else it throws some error in the Polyfills file.
  2. I can't pass a function or an object as prop from my React App to Stencil component
  3. It doesn't have any example on setting up react with stencil

Can anybody please help me?

Aayush Kumar
  • 1
  • 3
  • This is primarily opinion based. Please post a queston describing(with code), what problems you're facing with stencilJS, then maybe we can help – Ayush Gupta Oct 21 '19 at 12:50
  • I need help with integration, I have used the method that was given on the official website and it doesn't seem to be the best way. Second is there a way to pass an React Object through props from the React App to the Stencil Component? – Aayush Kumar Oct 21 '19 at 12:57

2 Answers2

1

Personally i use my own github instance where i upload the whole web-components project with dist and loader folder to github. Afterwards you can use this command to load the project into your npm-modules of your React app. It works a bit like a npm install from your github repo.

git+https://my-github-instance/web-components/my-components.git

Here are some details if you have problems get it running.

How to install an npm package from GitHub directly?

Than you can just npm update / npm install to get the freshest version of your web-components in your React app.

The Documentation of Stencil is pretty detailed how you can use the web-components in React:

https://stenciljs.com/docs/react

Good Luck

Christian Meyer
  • 1,501
  • 1
  • 14
  • 19
0

Out of the box React has issues integrating with Custom Elements (such as Stencil components) - you can see more details at https://custom-elements-everywhere.com/ as well as a few workarounds.

To aid in this integration, Stencil components can be extended with a bindings layer for React which convert the custom elements into consumable React components. See here for details: https://github.com/ionic-team/stencil-ds-plugins#react

matthewsteele
  • 1,797
  • 1
  • 15
  • 31