NOTE: This is pre-alpha and hasn't been thoroughly tested.

Psychic Window

Psychic Window is a react component for displaying iframes in gatsby sites. It's useful for sites that use gatsby-source-wordpress. Now you can also use that WP install to display a form or gated content on your static site easily and for free.

Psychic Window takes loading placeholder markup as it's children. It uses post-robot to send a css string to your iframe. Your iframe applies the css and sends it's height back up to Psychic Window where its height is adjusted to remove scrollbars. The loading placeholder is then hidden and the iframe is unveiled.

Considerations

You should use this sparingly. Iframe performance is probably not that good. In my tests I included very basic markup inside my iframe and as few scripts as possible and it didn't seem to hurt performance. Multiple instances are possible but not recommended on the same page.

Example usage:

// In gatsby
<PsychicWindow
  url="https://site.com/psychic-window/contact-us/"
  windowCSS={`
    .gform_wrapper .top_label .gfield_label {
        display: none !important;
    }

    html, * {
        margin-top: 0 !important;
    }
    `}
>
  Loading...
</PsychicWindow>

<!-- in WordPress -->
<?php get_header(); ?>
<script src="post-robot.js"></script>
<script src='psychicwindows-iframe.js'></script>

<?php
    // Add whatever content you want to display here.
    if ( have_posts() ) {

        while ( have_posts() ) {
            the_post();
            the_content();
        }

        wp_reset_postdata();
    }
?>