Minimize and open iframe using react js in SPFX

Question

I have a iframe control imported from 'react-iframe'.We are showing a chatbot(PowerVirtualAgent) inside an iframe

.

I want to have a minimize button and open button functionalities over the iframe control.I could not find any properties for these functionalitites in iframe control.

Could anyone help ASAP. Below is the snapshot of iframe.

Answer 1

I believe 'React Iframe' component does not have such a property or event handler that could hide/open the iframe panel. I suggest you wrap this iframe component and a button within a container, use state to control its visibility.

You may take a reference of below spfx extension samples:

• https://github.com/pnp/sp-dev-fx-extensions/blob/master/samples/react-adal-bot/spfx/src/extensions/graphBot/components/GraphBot.tsx

• https://github.com/pnp/sp-dev-fx-extensions/blob/master/samples/react-application-qna-chat/README.md

BR