react-discern-top-navbar
v1.0.0
Published
UI component to determine if you are scrolled to the top of the page
Downloads
3
Maintainers
Readme
react-discern-top-navbar
Installation
npm install react-discern-top-navbar
Basic Usage
import TopDiscerningNavbar from "react-discern-top-navbar"
function App() {
return <TopDiscerningNavbar><TopDiscerningNavbar/>
};
Default Styles
The TopDiscerningNavbar may be passed a style object or a base className and topClassName so you can style this component as you would like. I hight recommend using the style object or className and topClassName. However, if you choose not to pass a style object or className and topClassName, these are your default styles for the component.
const defaultStyle = {
height: "66px",
width: "100vw",
backgroundColor: "grey",
position: "fixed"
};
const defaultTopStyle = {
height: "66px",
width: "100vw",
backgroundColor: "white",
position: "fixed"
};
The default styles are really just intended to give you a reference point for when uou first start woking with the package.
Passing Props
These styles can be overwritten if you pass in props! TopDiscerningNavbar accepts six (6) different options as props:
| Prop | Prop Type | Purpose | | ---------------------- | --------- | ------------------------------------------------------------------------------------- | | className | String | Assign a className to the navbar | | topClassName | String | Assign a className to the navbar when it is at the top of the page | | height | Number | Assign a height to style of the the navbar in px | | width | Number | Assign a width to style of the the navbar in vw | | backgroundColor | String | Assign a backgruondColor to the style of the navbar | | topBackgroundColor | String | Assign a backgruondColor to the style of the navbar when it is at the top of the page |
Note: If you are declaring a topClassName, you need to declare a className as well
Advanced Usage/Passing Props
- If you pass in a style object or className/topClassName,
height
,width
,backgroundColor
andtopBackgroundColor
will be ignored. - Passing in a className with no topClassName will give the component the className that you pass it.
- If you have a passed a className and a topClassName, the component at the top of the page will receive a className of both, (e.g.,
className="hello" topClassName="world"
the component will receive a className of"hello world"
) if you are not at the top of the page, it will only receive the className of"hello"
. - Passing in a style object and className will behave the way you would expect with any other element (i.e., the className will be over-written by any styles that )
Passing in classNames
import TopDetectingNavbar from "react-discern-top-navbar";
function App() {
return (
<TopDiscerningNavbar className="hello" topClassName="world">
<h1>Your content here</h1>
</TopDiscerningNavbar>
);
}
className at the top of the page will be "hello world"
className anywhere else on the page will be "hello"
Passing in style object
import TopDiscerningNavbar from "react-discern-top-navbar";
function App() {
return (
<TopDiscerningNavbar
style={{ backgroundColor: "red", height: "70px", width: "100vw" }}
>
<h1>Your content here</h1>
</TopDiscerningNavbar>
);
}
Passing in style props
import TopDiscerningNavbar from "react-discern-top-navbar";
function App() {
return (
<TopDiscerningNavbar
height={66}
width={100}
backgroundColor="red"
topBackgroundColor="blue"
>
<h1>Your content here</h1>
</TopDiscerningNavbar>
);
}
Template
Template for react npm packages provided by flexdinesh on github.
License
react-discern-top-navbar is MIT licensed