How to make a UI element persistent in Gatsby

When I built the website for Landing in Tech I wanted to have a bar on top of the page with the latest episode.

The idea was to allow users to listen to the episode while browsing the page.

I added the iframe on my layout.js file and expected it to work, obviously, it didn't. With each route change, the whole layout reloads which means that you would lose your progress if you started to listen to the episode.

Yesterday, I asked on Twitter if anyone knew a way to fix this issue. Baz gave great advice on how to achieve this. He mentioned that Gatsby should have a way to handle this, that was my lightbulb moment - perhaps using the gatsby-browser api, might do exactly what I needed.

A lucky strike

I have to admit that I came to the solution by luck. I was scrolling through the browser api pages and came across the wrapRootElement.

"This is useful to set up any Provider components that will wrap your application. For setting persistent UI elements around pages use wrapPageElement." Gatsby documentation

After playing around with it, I have realised that both wrapRootElement and wrapPageElement do what I wanted, but since Gatsby suggests using the former for persistent UI elements, I've used that one instead.

Let's open the gatsby-browser.js file and add the SoundCloud iframe inside our Layout.

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element }) => {
    return (
        <Layout>
            <div className="sound-cloud">
                <iframe
                    className="mb-0"
                    width="100%"
                    height="20"
                    scrolling="no"
                    frameBorder="no"
                    allow="autoplay"
                    title="latest episode"
                    src="https://w.soundcloud.com/player/..."
                />
            </div>
            {element}
        </Layout>
    )
}

Refactoring Pages

Since I am importing the Layout and using it in wrapPageElement that means that each page will have two Layout components, the one that I have imported in each page and the one being set in gatsby-browser.

This meant that I had Ito refactor every page and remove the Layout component on every single one. A tedious task, but the end result does exactly what I wanted.

Update

After sharing this article on Twitter a lot of great developers told me that I need to add the same to the gatsby-ssr.js file, this is because Gatsby uses that file when running gatsby build. So, make sure you add the code to both gatsby-browser and gatsby-ssr file.

How to make a UI element persistent in Gatsby

Comments

More from this blog

Email aliases to fight off spam and improve security

Journey of improving security and account hardening

Git: Understanding version control

Useful Command Line Shortcuts

A lucky strike

Refactoring Pages

Command Palette

Comments

More from this blog

A lucky strike

Refactoring Pages