ryanseddon / react-frame-component

Render your React app to an iFrame
http://ryanseddon.github.io/react-frame-component/
MIT License
1.75k stars 156 forks source link

fix: change default export away from React.Component #227

Closed disintegrator closed 1 year ago

disintegrator commented 2 years ago

Closes #225

This change updates the type of the default export of this library to correct match what's in the JS code.

Previously, the types indicated the default export was a class component which resulted in an invalid defintion of the ref prop. In reality, the default export was function component returned from React.forwardRef.

I've tested this change in types locally with the following snippet:

import React from "react";
import Frame, { useFrame } from "react-frame-component";

const CodeBlockFrame: React.FC<CodeBlockFrameProps> = (props) => {
  const { theme } = useTheme();
  const cacheKey = useAlphaId();
  const iframeRef = React.useRef<HTMLIFrameElement>(null);

  if (!cacheKey) {
    return null;
  }

  return (
    <Frame
      ref={iframeRef}
      title="Live demo sandbox"
      css={frameStyle(theme, props)}
      style={initialStyles}
      initialContent={initialContent(`rl-emotion-${cacheKey}`)}
    >
      <FrameBody>{props.children}</FrameBody>
    </Frame>
  );
};

You can ignore a bunch of that code. The main bit was the iframeRef returned from useRef was assignable to the Frame's ref prop.

ryanseddon commented 2 years ago

Nice, thanks!

@jamesremuscat let me know if this fixes your problem and we'll get this merged.

disintegrator commented 2 years ago

@ryanseddon fwiw, I did encounter the same bug as @jamesremuscat and fixed it with this (failed to mention it in the PR). If they don’t reply any time soon, I still think it’ll be worth going ahead with it.