React Suite Nav Extraíble

React suite es una biblioteca de componentes de React, un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React Suite Nav Extraíble . Un componente de navegación proporciona una lista de varios tipos de menús de navegación, que pueden ser diseños horizontales y verticales. Un componente extraíble de navegación proporciona la funcionalidad para eliminar un elemento de navegación de la barra de navegación y también puede agregar un elemento nuevo a un componente de navegación.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2 : después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Paso 4: Instale el paquete del Node responsive-nav :

npm install --save @rsuite/responsive-nav

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Sintaxis:

// Import statement
import ResponsiveNav from "@rsuite/responsive-nav";

// App.Js file
function App() {
    <ResponsiveNav removable onItemRemove={eventKey...}>
        <ResponsiveNav.Item>...</ResponsiveNav.Item>
        ....
    </ResponsiveNav>
}

Ejemplo 1: este ejemplo demuestra el componente extraíble de navegación.

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>GeeksforGeeks</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>
    );
}

Producción:

 

Ejemplo 2: Este ejemplo muestra el elemento de navegación extraíble y la adición del nuevo elemento de navegación.

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>GeeksforGeeks</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>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/nav/#removable