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 ridiculous. I found this...
Date: February 11, 2020
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 ridiculous. I found this package from [4m[38;2;248;248;242mday-4[0m <[38;2;248;248;242mhttps://www.gatsbyjs.org/blog/100days/react-component/?utm_campaign=100%20Days%20of%20Gatsby&utm_source=hs_email&utm_medium=email&utm_content=82376619&_hsenc=p2ANqtz-_DBh1A1A-GEy2TujddXq_H1de5wGZ_X6jIqB2wv_PE7QgUk40pfi64jbSVHv-S3bfzKZOQywtoTuup2aeO0o_KpeiF8w&_hsmi=82376619[0m> 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.
[1m[38;2;189;147;249minstall react-headroom[0m
[38;2;68;71;90m──────────────────────[0m
installation is easy
[38;2;248;248;242m[code][0m
npm i react-headroom
[1m[38;2;189;147;249mImport Headroom[0m
[38;2;68;71;90m───────────────[0m
There was no instructions for es6 style imports that are common with gatsbyjs sites like mine, but it was intuitive to figure out.
[38;2;248;248;242m[code][0m
import Headroom from 'react-headroom'
[1m[38;2;189;147;249mUsing Headroom[0m
[38;2;68;71;90m──────────────[0m
Simply wrap your existing content, Nav in my case, with the [38;2;189;147;249m[0m component and your off to the races. The content will pop back into view when you scroll past then back up.
[38;2;248;248;242m[code][0m
<-- Your content goes here -->
[1m[38;2;189;147;249mSee it in action[0m
[38;2;68;71;90m────────────────[0m
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.
Image: showing it in action on waylonwalker.com
Here it is on [4m[38;2;248;248;242mwaylonwalker.com[0m <[38;2;248;248;242mhttps://waylonwalker.com[0m>
[1m[38;2;189;147;249mConfigurable[0m
[38;2;68;71;90m────────────[0m
[38;2;189;147;249mreact-headroom[0m is configurable, but I did not find it necessary. I really like the simplicity that it brought by just adding the [38;2;189;147;249m[0m component.
Image: react-headroom docs
[1m[38;2;189;147;249mLinks[0m
[38;2;68;71;90m─────[0m
Check out the relavant links for more details.
[1mGitHub[0m: [4m[38;2;248;248;242mhttps://github.com/KyleAMathews/react-headroom[0m [1mDemo Site[0m: [4m[38;2;248;248;242mhttps://kyleamathews.github.io/react-headroom/[0m [1mDocs[0m: [4m[38;2;248;248;242mhttps://kyleamathews.github.io/react-headroom/[0m