Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-sticky-nav
Advanced tools
A sticky nav bar for React that stays out of your way
Weekly downloads
Readme
A sticky nav bar for React that stays out of your way.
When the scrolling is just right
<ReactStickyNav />
with, like styled-components or emotionwindow.requestAnimationFrame
. You could use a polyfill for older browsersposition: sticky;
support. For Safari, you should add position: -webkit-sticky;
to your own styles. Unfortunately this is not possible to support with React's inline style syntax.// @jsx jsx
import React from "react";
import { css, jsx } from "@emotion/core";
import Navigation from "react-sticky-nav";
import { HamburgerMenu, Logo } from "./components";
...
const styles = css`
background-color: white;
box-shadow: ${open ? "none" : "0 1px 2px rgba(0, 0, 0, 0.08)"};
height: 64px;
position: -webkit-sticky /* This is needed for Safari support */
`;
...
ReactDOM.render(
<Navigation css={styles} disabled={open}>
<Logo />
<HamburgerMenu open={open} />
</Navigation>,
document.getElementById("#root")
);
To use <ReactStickyNav />
's current position (hidden, pinned, or unfixed) in its children, you can supply <ReactStickyNav /
a render function as its child:
const SizableLogo = styled(Logo)(props => ({
height: props.large ? "128px" : "64px"
}));
ReactDOM.render(
<Navigation css={styles} disabled={open}>
{position => (
<>
<SizableLogo large={!open && position === "unfixed"} />
<HamburgerMenu open={open} />
</>
)}
</Navigation>,
document.getElementById("#root")
);
render
propif you wish to completely replace the default rendered <nav />
element, you can use the render
prop to supply your own. In this case the prop will receive as its argument an object containing the current position: "hidden" | "pinned" | "unfixed"
, top: number
(mutable) and a ref: React.Ref<HTMLElement>
that should be attached to the main container:
import StickyNav, { styles as stickyNavStyles } from "react-sticky-nav";
const Nav = styled.nav`
${stickyNavStyles};
background: papayagreen;
`;
ReactDOM.render(
<StickyNav render={({ position, ref }) => (
<Nav ref={ref}>My custom navbar is {position}</Nav>
)} />,
document.getElementById("#root")
);
The react-sticky-nav
comes with very little defaults, and should be styled by supplying it with a className
property that is attached some CSS.
The <ReactStickyNav />
component is a <nav />
element with the following inline styles:
display: block;
position: sticky;
width: 100%;
In other words, <ReactStickyNav />
is a fixed full-width element that sticks to the top of your screen. The only functionality is that <ReactStickyNav />
will move out the viewport when scrolling down, and back in when scrolling up. This is done by controlling the top
CSS property.
There are three additional classes added for the different states possible:
unfixed
is applied when <ReactStickyNav />
doesn't touch the top of the screen but is on the pagehidden
is applied when <ReactStickyNav />
is fully hidden (for example, after scrolling down or reloading page when scrolled)pinned
is applied when <ReactStickyNav />
scrolling up from being hidden
These classes can be used for styling (see demo for example).If you want to disable <ReactStickyNav />
's behaviour, supply the disabled
prop. When disabled, <ReactStickyNav />
will simply stick to the top of the screen.
If you need to access the dom element, you can supply your own ref from React.createRef
via the ref?: React.Ref<HTMLDivElement>
prop.
FAQs
A sticky nav bar for React that stays out of your way
The npm package react-sticky-nav receives a total of 195 weekly downloads. As such, react-sticky-nav popularity was classified as not popular.
We found that react-sticky-nav demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.