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;127;187;179mday-4[0m <[38;2;122;132;120mhttps://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;167;192;128minstall react-headroom[0m
[38;2;71;82;88m──────────────────────[0m
installation is easy
[38;2;122;132;120m[code][0m
npm i react-headroom
[1m[38;2;167;192;128mImport Headroom[0m
[38;2;71;82;88m───────────────[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;122;132;120m[code][0m
import Headroom from 'react-headroom'
[1m[38;2;167;192;128mUsing Headroom[0m
[38;2;71;82;88m──────────────[0m
Simply wrap your existing content, Nav in my case, with the [38;2;167;192;128m[0m component and your off to the races. The content will pop back into view when you scroll past then back up.
[38;2;122;132;120m[code][0m
<-- Your content goes here -->
[1m[38;2;167;192;128mSee it in action[0m
[38;2;71;82;88m────────────────[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
[38;2;122;132;120m│ [0mHere it is on [4m[38;2;127;187;179mwaylonwalker.com[0m <[38;2;122;132;120mhttps://waylonwalker.com[0m>
[1m[38;2;167;192;128mConfigurable[0m
[38;2;71;82;88m────────────[0m
[38;2;167;192;128mreact-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;167;192;128m[0m component.
Image: react-headroom docs
[1m[38;2;167;192;128mLinks[0m
[38;2;71;82;88m─────[0m
Check out the relavant links for more details.
[1mGitHub[0m: [4m[38;2;127;187;179mhttps://github.com/KyleAMathews/react-headroom[0m [1mDemo Site[0m: [4m[38;2;127;187;179mhttps://kyleamathews.github.io/react-headroom/[0m [1mDocs[0m: [4m[38;2;127;187;179mhttps://kyleamathews.github.io/react-headroom/[0m