React bottom navigation component

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

  

npm install  --save  reactjs-bottom-navigation

  

all item properties are optional, if no property is provided the item will take space and it will be empty

To use the component, you need to provide an array of "items" which represent the individual navigation options in the bottom navigation bar. Each item can have a "title", an "icon", or both. You can also provide a custom rendering function to create your own content for the item.

Example:

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

function  App() {

const  bottomNavItems = [
	{
		title:  "Home",
		onClick: ({ id }) =>  alert("menu clicked " + id),
		icon: <HomeIcon />, // just for example
		activeIcon: <HomeIcon color="#fff" />
	},

	// items can have either title, icon or both or neither!
	{
	},
	{
		title:  "Search",
	},
	// the render method enables custom item content
	{
		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"
	/>
</div>
);

}


export  default  App;

the component elements have the following class names which you can assign new styles to them:

Bottom Navigation: bottom-nav

Items: bottom-nav-item

titles: bottom-nav-item–title

you can also use "activeBgColor" and "activeTextColor" props and the item render method

MIT © hoseinhamzei