Wsrtjtyk

I want to generate an embedded code from my ReactJS application. I really don't know how can I achieve such functionality?

for example, I want to generate a code which can be used in another website using the iframe, same like youtube embedded code.

Thanks in advance.

You can do that with below steps.

1.Add DOM element container to contain your component

<!-- ... Your HTML code ... -->



<div id="example_container"></div>



<!-- ...Your HTML code ... -->

The div tag will help us to find out this element from our script code to render our desired react code within it.
2. Add your react script.Please make sure you load react before your script.

<!-- Load react scripts -->

<!-- Load our React component. -->

  <script src="example.js"></script>

3. After your code in example.js which has ExampleReactClass extends React.Componentand const e = React.createElement; add the below lines to fix your code in mentioned <div>

const domContainer = document.querySelector('#example_container');

ReactDOM.render(e(ExampleReactClass), domContainer);

Hope it will work!!

Since the question has example of youtube, lets start with that.

<iframe width="560" height="315" src="https://www.yoursite.com/embed/h04NnnUApaM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Our main concern is the src attribute, rest of the iframe attributes can be considered if needed.

To make things easier we need to have Router to handle the embed url request from iframe

import { BrowserRouter } from 'react-router-dom'



ReactDOM.render((

  <BrowserRouter>

    <App />

  </BrowserRouter>

), document.getElementById('root'))

Add a route to handle /embed/h04NnnUApaM

<Route path='/embed/:id' component={YourComponent}/>

Get the embed id in YourComponent like this props.match.params.number

render the component, and it should show in the iframe.

Generate embed code

Depends on what you want to embed.

<textarea>{this.state.embedCode}<textarea>

embedCode will be something like this for the above example (id depends on what you need to render your component from the embeded page)

<iframe width="560" height="315" src="https://www.yoursite.com/embed/h04NnnUApaM"></iframe>