Add a prop for a custom document (good for iframes).

[Reklino]

Hey there! This is great little tool 🙏 . Thanks for putting it together.

I'm using this in a project that uses Google Fonts in an iframe, so I need the <style> tags to be included in that document rather than the base document. This simply adds a new prop for this use case.

[jakewtaylor]

Hi, thanks for submitting a PR! 🙏

I'm just a little confused about the PropTypes/Typescript definitions you've added, can you explain? 😃

[jakewtaylor]

Hi @Reklino, how's it going - did you manage to figure out what the types should be? 😆😋

[Reklino]

@jakewtaylor thanks for the reminder. #document is just a good old object. Just updated.

[jakewtaylor]

Apologies for the delay @Reklino, the code looks good to me now. Sorry to be a pain, but could you provide a small example of how this new prop works, just so I can test it? 😄

[Reklino]

@jakewtaylor sure!

If you have a rendered iframe, just get the document of that iframe and pass it to your component via the contentDocument prop.

Example using react-frame-component (link)

const MyComponent = (props, context) => (
<Fragment>
  <Frame>
    <FrameContextConsumer>
      {
        // Callback is invoked with iframe's window and document instances
        ({document, window}) => {
          <Fragment>
           <GoogleFontLoader
              fonts={[
                {
                  font: 'Roboto',
                  weights: [400, '400i'],
                },
              ]}
              contentDocument={document}
            />
          <h1 style={{ fontFamily: 'Roboto'; }}>Will render with Roboto</h1>
          </Fragment>
        }
      }
    </FrameContextConsumer>
  </Frame>
  <h1 style={{ fontFamily: 'Roboto'; }}>Will not render with Roboto</h1>
</Fragment>
);

Of course, you don't have to use react-frame-component. That's just my preferred method.

[Reklino]

Hey @jakewtaylor 👋 . Any chance we could merge this one in?