Need some room, at the top

Pain Point

I found myself constantly scrolling up to the top of the page to toggle the dark mode toggle for testing. I finally had enough content to try React Headroom so I did. It was quite simple to add and configure.

It was a tool I had learned about while ~hoarding~ collecting knowledge. I collect a lot of information and tools that I don't have a reason for using but just the act of collecting them seems to help me. It's not always The Collector's Fallacy in play! Well, it mostly is, but not this time!

Installation

Copy
1npm install react-headroom

My Usage

Copy
1import Headroom from 'react-headroom'
2
3// Then later, I just Wrapped the header component with it.
4// I'm not sure why I didn't put it in the header component...hmmm
5return (
6    <>
7      <MenuProvider>
8        <Headroom>
9          <Header siteTitle={data.site.siteMetadata?.title || `Title`}
10        </Headroom>
11        <SiteWrapper>
12        //...
13        </SiteWrapper>
14      </MenuProvider>
15    </>
16  )

React Headroom added to README

Attributions

Photo by Jiroe (@iamjiroe) on Unsplash