Disqus integration

Custom Components
6

I’ve been investigating a little on that auto resize issue, and it seems that there is no obvious way to do it as far as I understood. If there is one, I’d be glad to hear it :smiley:

For testing purposes I'm using a MutationObserver to get notified when I should update the frame height. 
import React, { useEffect, useRef } from "react"
import { DiscussionEmbed } from "disqus-react"
import {
  withStreamlitConnection,
  ComponentProps,
  Streamlit,
} from "./streamlit"

import "bootstrap/dist/css/bootstrap.min.css"
import "./streamlit.css"

function Disqus(props: ComponentProps) {
  const container = useRef<HTMLDivElement>(null)
  const observer = new MutationObserver(mutation => {
    Streamlit.setFrameHeight()  // Causes infinite reloads because of re-rendering
  })

  useEffect(() => {
    if (container.current) {
      observer.observe(container.current, {
        attributes: true,
        subtree: true
      })
    }
    return () => {
      observer.disconnect()
    }
  }, [])

  return (
    <div ref={container}>
      <DiscussionEmbed
        shortname={props.args.shortname}
        config={{
          url: props.args.url,
          identifier: props.args.identifier,
          title: props.args.title
        }}
      />
    </div>
  )
}

export default withStreamlitConnection(Disqus)

However, calling Streamlit.setFrameHeight() causes a re-render which makes Disqus reload constantly. The reason is that setState is called everytime a streamlit:setFrameHeight message is sent.

To support setting the height without having to reload the component each time, we could rely on a react reference to get the component’s DOM, and set its height.

This change would affect the ComponentInstance class in frontend/src/components/widgets/CustomComponent/ComponentInstance.tsx.

I’ll fill a github issue when I have time.

1 Like