I just added react-headroom to my site


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

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'

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>

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/



👀 see an issue, edit this post on GitHub

If you found value in this post
and want to send a tip.

Buy Me A Coffee

Check out my otherblogs

tweet about this post and it will show up here.

    loading

.