Importación de pasos de React Suite

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. Pasos es una barra de navegación que guía a los usuarios a través de los pasos de una tarea.

Podemos importar pasos de 2 maneras que se enumeran a continuación

Sintaxis

import { Steps } from 'rsuite';
// or
import Steps from 'rsuite/Steps';

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

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: se verá así

 

Ejemplo 1: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. En este ejemplo, mostraremos cómo podemos importar Pasos usando: import { Steps } from ‘rsuite’;

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Steps } from 'rsuite';
  
function App() {
    return (
        <div style={{ padding: 10 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3 >
                React Suite Steps Import</h3>
            <Steps current={4}>
                <Steps.Item title="Step 1" />
                <Steps.Item title="Step 2" />
                <Steps.Item title="Step 3" />
                <Steps.Item title="Step 4" />
            </Steps>
        </div>
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida:

 

Ejemplo 2: En este ejemplo, mostraremos cómo podemos importar Pasos usando: importar Pasos desde ‘rsuite/Steps’;

import React from "react";
import "rsuite/dist/rsuite.min.css";
import Steps from 'rsuite/Steps';
function App() {
  
    return (
        <div style={{ padding: 10 }}>
            <h1 style={{ color: 'green' }}>
                GeeksforGeeks
            </h1>
            <h3 >
                React Suite Steps Import</h3>
            <Steps current={3}>
                <Steps.Item title="Eat" />
                <Steps.Item title="Sleep" />
                <Steps.Item title="Repeat" />
            </Steps>
        </div>
    );
}
  
export default App;

Producción:

 

Referencia: https://rsuitejs.com/components/steps/#import