React

How to make a UI element persistent in Gatsby

How to keep the SoundCloud playing with each route change.

Table of Contents
  1. A lucky strike
  2. Refactoring Pages

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.

js
1const React = require("react")
2const Layout = require("./src/components/layout").default
3
4exports.wrapPageElement = ({ element }) => {
5 return (
6 <Layout>
7 <div className="sound-cloud">
8 <iframe
9 className="mb-0"
10 width="100%"
11 height="20"
12 scrolling="no"
13 frameBorder="no"
14 allow="autoplay"
15 title="latest episode"
16 src="https://w.soundcloud.com/player/..."
17 />
18 </div>
19 {element}
20 </Layout>
21 )
22}

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.

Webmentions

0 Like 0 Comment

You might also like these

How to create a function to filter articles by tag. On this post I am using the javascript filter method to filter all articles.

Read More
React

How to filter all MDX articles by tags

How to filter all MDX articles by tags

A quick introduction on how to use the Elasticlurn Plugin for Gatsby together with MDX to create a search bar component and allow users to search your site.

Read More
React

How to use elasticlunr plugin with MDX

How to use elasticlunr plugin with MDX

How to add syntax highlighting to gatsby MDX with prism.

Read More
React

Add code highlighting to MDX

Add code highlighting to MDX

Nx makes it easy to work with monorepost, this article will show you how you can use Nx for your projects and talks about some basic commands that will help you.

Read More
Tools

Getting started with Nx

Getting started with Nx