Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-sticky-nav
Advanced tools
Changelog
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 193 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.