Enable way to pass more props through to iframe element

[breadadams]

Currently to be able to set any other props/attributes on the iframe element we have to do so via the ref on mount (eg. with useEffect):

useEffect(() => {
  if (ref && ref.current && ref.current.frame) {
    ref.current.frame.id = "frame-id";
    ref.current.frame.setAttribute("allow", "microphone; camera");
  }
}, [])

To avoid this, and also avoid having props for each possible attribute, there could be an iframeProps prop that gets destructured here (before the defaults):

chrome-sidebar/src/frame.js

Lines 100 to 109 in ae9f07e

	<iframe
	className={cx({
	[iframeClass]: true,
	[iframeClassName]: true
	})}
	style={iframeStyle}
	src={url}
	ref={frame => this.frame = frame}
	onLoad={this.onLoad}
	/>

eg.

<iframe
   {...iframeProps}
   className={cx({ 
     [iframeClass]: true, 
     [iframeClassName]: true 
   })} 
   style={iframeStyle} 
   src={url} 
   ref={frame => this.frame = frame} 
   onLoad={this.onLoad} 
 /> 

[SelfMadeDev]

To avoid this, and also avoid having props for each possible attribute, there could be an iframeProps prop that gets destructured here (before the defaults)

@breadadams Could you explain in details how to do that, please? I've spent hours to set "allow" attribute to the iframe, but it doesn't work.

[breadadams]

@SelfMadeDev I'm not working on the project where we used this library any longer, however from what I recall the implementation was something like:

const App = () => {
  const frameRef = useRef();

  useEffect(() => {
    const { frame } = frameRef?.current ?? {};

    if (frame) {
      frame.setAttribute("allow", "microphone *");
    }
  }, []);

  return <Frame ref={frameRef} />
}

Hope that helps