reactjs-bottom-navigation

> React bottom navigation component

!NPM Downloads

Table of Contents

- Introduction
- Installation
- Props
- Item Structure
- Usage
- Customization
- License

Introduction

!Preview

"ReactJS Bottom Navigation" is a lightweight and flexible component that provides a customizable bottom navigation experience for your React applications. This component has been fully re-implemented in TypeScript in version 2, providing a more robust and type-safe development experience. With a range of options to customize it.

Installation

``bash
npm install --save reactjs-bottom-navigation
`

Props

| Props | Type | Default | Description |
|------------------|--------------------------|-----------|-----------------------------------------------------------------------------|
| items | BottomNavigationItem[] | - | The array of items to display in the navigation |
| selected | number | null | (optional) The index of the currently selected item |
| onItemClick | function | - | (optional) Triggered when an item is clicked, returns the clicked item |
| activeBgColor | string | - | (optional) Custom active background color code |
| activeTextColor | string | black | (optional) Custom active text color code |
| hideOnScroll | boolean | false | (optional) Hides the navigation bar when scrolling |
| style | React.CSSProperties | {} | (optional) Custom styles for the navigation container |
| className | string | "" | (optional) Custom class name for the navigation container |

$3

All item properties are optional. If no property is provided, the item will occupy space but remain empty.

| Prop | Type | Description |
|------------|-------------------------------|-----------------------------------------------------------------------------|
| title | string | (optional) Item title |
| icon | JSX.Element | (optional) Item icon |
| activeIcon | JSX.Element | (optional) Item active icon |
| onClick | function | (optional) Triggered when the item is clicked, returns the clicked item |
| render | ({ isActive: boolean; id: number }) => JSX.Element | (optional) Custom render function for the item |
| active | boolean | (optional) Custom active state control. If not provided, falls back to selected index behavior |

Usage

To use the component, provide an array of items representing the navigation options in the bar. Each item can include a title, an icon, or custom content using the render function.

Example:

`jsx
import React, { useState } from "react";
import { BottomNavigation } from "reactjs-bottom-navigation";

function App() {
const bottomNavItems = [
{
title: "Home",
onClick: ({ id }) => alert("Menu clicked " + id),
icon: ,
activeIcon:
},
{
title: "Search",
},
{
render: ({ isActive, id }) => isActive ? {id} : {id},
},
];

return (

items={bottomNavItems}
selected={0}
onItemClick={(item) => console.log(item)}
activeBgColor="slateBlue"
activeTextColor="white"
hideOnScroll={true}
className="custom-bottom-nav"
style={{ position: "fixed", bottom: 0, width: "100%" }}
/>

);
}

export default App;
`

Customization

The component offers multiple ways to customize:

$3

- Navigation container: bottom-nav
- Navigation items: bottom-nav-item
- Item titles: bottom-nav-item-title
- Active items: Add active class to bottom-nav-item

You can use activeBgColor, activeTextColor, and the className prop to further customize the appearance.

$3

Use the hideOnScroll prop to automatically hide the navigation bar when scrolling down.

$3

Use the render method in items` to define custom content for each navigation item.

License

MIT © hoseinhamzei