DEV Community

Cover image for Save screen real estate with react-headroom
Waylon Walker
Waylon Walker

Posted on • Originally published at waylonwalker.com on

1 1

Save screen real estate with react-headroom

It was so easy to get a professional looking navbar with just 3 lines of code. This package seriously is so usable on mobile it is rediculous. I found this package from day 4 of the 100 days of gatsby challenge. It is by the wonderful man who brought us gatsbyjs Kyle Mathews, so you know its gotta be good.

install react-headroom

installation is easy

npm i react-headroom
Enter fullscreen mode Exit fullscreen mode

Import Headroom

There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out.

import Headroom from 'react-headroom'
Enter fullscreen mode Exit fullscreen mode

Using Headroom

Simply wrap your existing content, Nav in my case, with the <Headroom /> component and your off to the races. The content will pop back into view when you scroll past then back up.

<Headroom>
   <-- Your content goes here -->
</Headroom>
Enter fullscreen mode Exit fullscreen mode

See it in action

I think this simple package completely changes the ux of your site on mobile. You can get that sticky nav out of the way, but its still right there with just a little bit of a scroll up.

showing it in action on waylonwalker.com

Here it is on waylonwalker.com

Configurable

react-headroom is configurable, but I did not find it necessary. I really like the simplicity that it brought by just adding the <Headroom\> component.

react-headroom docs

Links

Check out the relavant links for more details.

GitHub : https://github.com/KyleAMathews/react-headroom Demo Site : https://kyleamathews.github.io/react-headroom/ Docs : https://kyleamathews.github.io/react-headroom/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More