Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Dec 19, 2022

Conversation

disintegrator
Copy link
Contributor

@disintegrator disintegrator commented Sep 29, 2022

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
Copy link
Owner

Nice, thanks!

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

@disintegrator
Copy link
Contributor Author

@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.

@ryanseddon ryanseddon merged commit e4cd1ca into ryanseddon:master Dec 19, 2022
@disintegrator disintegrator deleted the ref-type branch December 20, 2022 01:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't determine correct type to use for Frame's ref prop
3 participants