This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
A React re-usable Naviagtion Bar component
View on NPM »
HeaderBar component is a react re-usable react component for the top navigation bar of a website. HeaderBar component accepts some props through which we can customize & dynamic navigation bar for a website.
Invite People modal component interact with the application, but without jumping to a new page and interrupting the user's workflow.
Install react fontawsome using the following command:
``
npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-regular-svg-icons
`
1. Install the HeaderBar component.
``
npm install hc-nav-bar --save
2. Import the HeaderBar.
`javascript`
import HeaderBar from "hc-nav-bar";
3. Mount the HeaderBar component on the DOM
`javascript`
ReactDOM.render(
4. Run the App
``
npm start
1. Open the index.js file & Uncomment the "Development code" part & comment on the "Production Code" part.
2. Run npm start.
`shell``
npm test -- --coverage
| Props | Type | Description |
| ------------------- | -------- | ------------------------------------------------------------------------------------------------------ |
| isHeaderSticky | boolean | Set the header sticky |
| domainName | string | Domain Name of your website like cankart, boxkit, xyz, etc |
| globalQuery | string | Value of Global search bar |
| profileImageSrc | string | Image source link of profile image |
| statusColor | string | Color which indicates the status of the profile where status can be online, offline, away, etc |
| isGlobalSearchAllow | boolean | Enable the global search bar for searching the whole website |
| isSettingsBtnAllow | boolean | Enable the dedicated settings button |
| pageName | string | Name of the current page |
| allowPageHeader | boolean | Toogle the Page Header's display of HeaderBar component |
| onGlobalQueryChange | function | Function for handling the search query. It provides the value of the globalQuery through its parameter |