Commento for React

import React, { useEffect, useState } from 'react'

const insertScript = src =>
    new Promise(resolve => {
        const script = window.document.createElement('script')

        script.async = true
        script.src = src
        script.id = 'commento-script'
        script.addEventListener('load', () => resolve(script))
        document.body.appendChild(script)
    })

const removeScript = id => {
    const script = window.document.getElementById(id)

    if (script) {
        document.body.removeChild(script)
    }
}

const Commento = ({ id, host = 'https://cdn.commento.io' }) => {
    const [isLoaded, setLoaded] = useState(false)

    useEffect(() => {
        if (!isLoaded) {
            insertScript(`${host}/js/commento.js`).then(() => setLoaded(true))
        }

        return () => removeScript('commento-script')
    }, [])

    return <div id="commento" />
}

export default Commento