react-webview/src/containers/App.js

This is analog webView mobile application

import React, { Component } from 'react'

const CSS = {
  root : {
    width: '100%',
    height : '600px' ,
    position: 'relative',
    border: '1px solid rgba(197, 197, 197, 0.22)'
  },
  statusbar : {
    width: '100%',
    height: '40px',
    position: 'relative',
    borderBottom: '2px solid #2196F3'
  },
  iframe : {
    height: '100%'
  },
  iframehtml : {
    width: '100%',
    height: '100%',
    border: 'none'
  },
  stringurl : {
    fontFamily : 'Helvetica',
    fontSize : '16px',
    textAlign : 'center',
    padding : '0',
    margin : '0',
    lineHeight : '40px',
    fontWeight : 'bold',
    color : '#6d6d6d'
  },
  button : {
    backgroundColor: 'transparent',
    border: 'none',
    lineHeight: '40px',
    margin: '0',
    padding: '0',
    position: 'absolute',
    left: '0px',
    width: '30px',
    fontWeight: 'bold',
    fontSize: '14px',
    color: '#a5977e',
    outline: 'none'
  },
  statusbarline : {
    position: 'absolute',
    width: '0%',
    height: '100%',
    transition: 'width 1s ease-in-out',
    backgroundColor: 'rgba(197, 197, 197, 0.22)'
  }
}


let IframeBar = React.createClass({
  getInitialState : function() {
    return {
      percent : 10
    }
  },
  changeStatusBar : function(number) {
    this.setState({percent:number})
  },
  render: function() {

    CSS.statusbarline.width = this.state.percent + '%'
    var url = this.props.url.replace(/(http|https):\/\/(www\.)?/,'')

    return (
      <div className="webview__block" style={{height : '100%'}}>
        <div className="status-bar" style={CSS.statusbar}>
          <div className="status-bar_line" style={CSS.statusbarline}></div>
          <button style={CSS.button} onClick={this.closeIframeBar}>X</button>
          <p style={CSS.stringurl}>{url}</p>
        </div>

        <div className="iframe" style={CSS.iframehtml}>
          <iframe id="iframe" src={this.props.url} style={CSS.iframehtml} onLoad={this.handleLoadFrame}></iframe>
        </div>
      </div>
    )
  },
  handleLoadFrame : function() {
    this.setState({percent:100})
  },
  closeIframeBar : function() {
    document.querySelector('.react-webview').remove()
  }
})

export default class ReactWebView extends Component {
  render() {
    return (
      <div className="react-webview" style={CSS.root}>
        <IframeBar url={this.props.url}/>
      </div>
    )
  }
}