0

I know that in React you can add components to any existing page from this excellent documentation (https://reactjs.org/docs/add-react-to-a-website.html). However, in that example the component is built from scratch. I am building several of my own components from scratch too but I would like to use a few different components from npm as well. For example, there is one called react-ace (https://www.npmjs.com/package/react-ace).

If a component is published on npm (and available on unpkg.com) is it possible to add it to an existing page like in the React docs example above? I have tried adding a script tag with this as the source: https://unpkg.com/react-ace@9.4.1/dist/react-ace.js/main.js but that does not make the AceEditor available. Or, do components have to be processed somehow in order to use them?

Note: I am also exploring using create-react-app to build and share the app and I may end up doing that but I want to know if any npm React component can be used in an existing page and if so how?

Mark M
  • 1,807
  • 2
  • 21
  • 40
  • After some playing around I found that if I add the tag: and look at the Window object there is in fact an object called ReactAce. Inside that object there are some functions, one of which is called 'default'. So, I tried to use this to create an editor: render() { return e(ReactAce.default, {fontSize: 36, value: "abc"}); } and I did get an editor to show up. Assuming I do not want to use create-react-app does this seem like an acceptable way to use the component? – Mark M Jul 22 '21 at 19:37
  • I am finding other components are not as easy to incorporate. What references do I need to look at to understand this better? – Mark M Jul 22 '21 at 21:21
  • Did you end up figuring out a good way to do this? I'm having a look at doing the same thing with `palavyr-chat-widget` - I need that to be able to load into html-only webpages. If I come up with a good solution, I'll come back and post it here. – PaulG Dec 06 '21 at 06:56

0 Answers0