Rendering Mirrored Website

Today my task is to render the mirrored website. It is very easy task. I choosed iframe to render the websites.
The HTML Inline Frame Element can be used within a normal document body.
So with iframe we just need to use the src attribute to the html file. The src attribute will tell the iframe which html file to load inside of it. The width and height of the iframe will specify the iframe’s viewport width and height.
So here is the Render Website component to render the website which is mirrored

export default class RenderWebsite extends Component {
  componentDidMount() {

  render() {
    let {mirroredSite,loading} = this.props;
    let renderConditional = () => {
      if(loading) {
        return (

) }else { if(!mirroredSite){ return (

No Url for current User

let format = checkUrl(mirroredSite.url); 
let newUrl = modifyUrl(mirroredSite.url,format); 
//console.log(newUrl,"new url converted one..."); 
return () } 
return ( {renderConditional()}) 

So this component wasn’t so difficult but more difficulty was to convert the format of the url to point to the correct file whatever html file that is. Next time I will start with Canvas over this to make a drawing board to draw the patterns over the rendered websites.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s