0

I have made SPA create-react-app. In the core there is a pharsal player with translations:

enter image description here

It has many dependencies like wavesurfe.js, material-ui, lodash, etc.

Under the hood there is a simple table with content:

enter image description here

Now I want to make a single js file for just a player. For add it directly to html file with and it'll render player from DOM element <div id="frazy-player">Content of material </div>

But whole app has router, drawers with heading (playlist), homepage etc. - that I don't need in local version.

How to bield react component with many dependencies to single js file, which will be rendered into given DOM element locally, in simple HTML file?

Working demo with player is here.

Improve this question
6
  • This question seems rather unclear Commented Sep 13, 2020 at 20:41
  • do you want to create a React component to be the only one rendered locally? Commented Sep 13, 2020 at 20:42
  • 1
    please add information regarding the build setup (CRA? next? which framework and environment) Commented Sep 13, 2020 at 20:43
  • @Itamar I have found a same question: stackoverflow.com/questions/51473061/… Build setup is plain html file with element <div id="my-component-trigger"> table of content</div> and my component in single js file imported in the head of html: <script src="domain.com/my_component.js" /> Commented Sep 14, 2020 at 12:25
  • 1
    and is this question answers your question? Commented Sep 14, 2020 at 19:34
Related questions
15
React: Integrate external libraries that have lots of DOM building in js
19
Using a regular JavaScript library inside a React component
3
Render Normal JavaScript in React
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.