sgpl/components/dynamic-html.js

import { h, Component } from 'preact'
import loadHtml from '../helpers/load-html'

class DynamicHtml extends Component {
  constructor (props) {
    super(props)
    this.state = {
      loading: true,
      content: null
    }
  }

  componentDidMount () {
    this.load(this.props.url)
  }

  load (url) {
    loadHtml(url)
      .then(content => {
        this.setState({
          content,
          loading: false
        })
      })
  }

  componentShouldUpdate () {
    return !this.state.loading
  }

  componentWillReceiveProps (props) {
    this.load(props.url)
  }

  render () {
    if (this.state.loading) {
      return h('div', null, 'Loading...')
    }

    return (
      h('div', {
        dangerouslySetInnerHTML: { __html: this.state.content }
      })
    )
  }
}

export default DynamicHtml