reactjs-bottom-navigation v2.2.1

reactjs-bottom-navigation

React bottom navigation component

Table of Contents

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

Introduction

"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

npm install --save reactjs-bottom-navigation

Props

Item Structure

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

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:

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

function App() {
  const bottomNavItems = [
    {
      title: "Home",
      onClick: ({ id }) => alert("Menu clicked " + id),
      icon: <HomeIcon />,
      activeIcon: <HomeIcon color="#fff" />
    },
    {
      title: "Search",
    },
    {
      render: ({ isActive, id }) => isActive ? <strong>{id}</strong> : <span>{id}</span>,
    },
  ];

  return (
    <div>
      <BottomNavigation
        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%" }}
      />
    </div>
  );
}

export default App;

Customization

The component offers multiple ways to customize:

Styles and Classes

• 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.

Hide on Scroll

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

Custom Content

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

License

MIT © hoseinhamzei