React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.
In this article, we’ll learn about React Suite Nav Removable. A nav component provides a list of various types of navigation menus, which can be landscape and portrait layouts. A nav removable component provides the functionality to remove a nav item from the navbar, and may also add a new item to a nav component.
Creating React Application And Installing Module:
Step 1: Create a React application using the given command:
npm create-react-app projectname
Step 2: After creating your project, move to it using the given command:
cd projectname
Step 3: Now Install the rsuite node package using the given command:
npm install rsuite
Step 4: Install the responsive-nav node package:
npm install --save @rsuite/responsive-nav
Project Structure: Now your project structure should look like the following:
Syntax:
// Import statement
import ResponsiveNav from "@rsuite/responsive-nav";
// App.Js file
function App() {
<ResponsiveNav removable onItemRemove={eventKey...}>
<ResponsiveNav.Item>...</ResponsiveNav.Item>
....
</ResponsiveNav>
}
Example 1: This example demonstrates the nav removable component.
Javascript
import { useState } from "react"; import "rsuite/dist/rsuite.min.css"; import ResponsiveNav from "@rsuite/responsive-nav"; const navItems = [ { eventKey: "A", label: "Home" }, { eventKey: "B", label: "Practice" }, { eventKey: "C", label: "Tutorials" }, { eventKey: "C", label: "GBlog" }, { eventKey: "C", label: "Jobs" }, ]; export default function App() { const [activeTab, setActiveTab] = useState("home"); const [nItems, setNItems] = useState(navItems); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Nav Removable </h4> <div style={{ marginTop: 20 }}> <ResponsiveNav removable appearance="tabs" moreProps={{ noCaret: true }} activeKey={activeTab} onSelect={setActiveTab} onItemRemove={(eventKey) => { const nextItems = [...nItems]; nextItems.splice( nextItems.map( (item) => item.eventKey) .indexOf(eventKey), 1 ); setNItems(nextItems); setActiveTab( nextItems[0] ? nextItems[0].eventKey : null ); }} > {nItems.map((item) => ( <ResponsiveNav.Item key={item.eventKey} eventKey={item.eventKey}> {item.label} </ResponsiveNav.Item> ))} </ResponsiveNav> </div> </div> </center> ); } |
Output:
Example 2: This example demonstrates the nav item removable and the addition of the new nav item.
Javascript
import { useState } from "react"; import { Button } from "rsuite/"; import "rsuite/dist/rsuite.min.css"; import ResponsiveNav from "@rsuite/responsive-nav"; import { More } from "@rsuite/icons"; const navItems = [ { eventKey: "A", label: "Item 1" }, { eventKey: "B", label: "Item 2" }, { eventKey: "C", label: "Item 3" }, ]; // Function to create a new item in the nav function getEventKey() { return Math.floor((Math.random() * 100) + 1) + ""; } export default function App() { const [activeTab, setActiveTab] = useState("home"); const [nItems, setNItems] = useState(navItems); return ( <center> <div> <h2>neveropen</h2> <h4 style={{ color: "green" }}> React Suite Nav Removable </h4> <div style={{ marginTop: 20 }}> <ResponsiveNav removable appearance="tabs" moreText={<More />} moreProps={{ noCaret: true }} activeKey={activeTab} onSelect={setActiveTab} onItemRemove={(eventKey) => { const nextItems = [...nItems]; nextItems.splice( nextItems.map( (item) => item.eventKey) .indexOf(eventKey), 1 ); setNItems(nextItems); setActiveTab( nextItems[0] ? nextItems[0].eventKey : null ); }} > {nItems.map((item) => ( <ResponsiveNav.Item key={item.eventKey} eventKey={item.eventKey}> {item.label} </ResponsiveNav.Item> ))} </ResponsiveNav> <hr /> {/* Button to add a new item in nav */} <Button appearance="primary" color="green" onClick={() => { const itemKey = getEventKey(); const nextItems = [ ...nItems, { eventKey: itemKey, label: `Item ${itemKey}`, }, ]; setNItems(nextItems); }} > Create Item </Button> </div> </div> </center> ); } |
Output:
Reference: https://rsuitejs.com/components/nav/#removable
