ReactJS usa el enlace UndoState

El gancho useUndoState es un gancho personalizado proporcionado por el paquete Rooks para React. Es similar al gancho useState además de la funcionalidad de deshacer.

Argumentos:

• initialValue: Es del tipo booleano que describe el valor inicial del estado. Su valor por defecto es falso.
• Opciones: Es del tipo objeto que acepta un maxSize que rige el número máximo de estados previos de los que realiza un seguimiento. Su valor maxSize predeterminado es 100.

Valor devuelto: Devuelve una array que tiene los siguientes atributos:

• value: Describe el valor actual del estado.
• setValue: Es del tipo función que actualiza el valor del estado.
• deshacer: Es del tipo función que deshace estados de valor.

Módulos Requeridos:

• npm
• crear-reaccionar-aplicacion

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-application demo

Paso 2: después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

cd demo

Paso 3 : Instale Rooks desde npm.

npm i rooks

Abra la carpeta src y elimine los siguientes archivos:

• logotipo.svg
• setupTests.js
• Aplicación.prueba.js
• índice.css
• informeWebVitals.js

Estructura del proyecto: El proyecto debería verse así:

 

Ejemplo: Veamos un ejemplo de un contador simple con funcionalidad de deshacer.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
  
  
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

import React from "react";
import { useUndoState } from "rooks";
import "./App.css"
  
function App() {
    const [value, setValue, undo] = useUndoState(0);
    return (
        <>
            <p className="para">{value}</p>
  
            <div className="btns">
                <button className="btn" 
                    onClick={() => setValue(value + 1)}>
                    Increment</button>
                <button className="btn" 
                    onClick={() => setValue(value - 1)}>
                    Decrement</button>
                <button className="btn" 
                    onClick={() => setValue(value * 10)}>
                    Muiltiply by 10</button>
                <button className="btn" 
                    onClick={() => setValue(value / 2)}>
                    Divide by 2</button>
                <button className="btn" 
                    onClick={undo}>Undo</button>
            </div>
        </>
    );
}
  
export default App;

/* Write CSS Here */
.para {
    margin: 20px;
    margin-left: 100px;
    color: green;
    font-size: 20px;
}
  
.btns {
    display: flex;
    flex-direction: column;
}
  
.btn {
    margin: 20px;
    width: 200px;
    border-radius: 5px;
    background: rgb(206, 245, 206);
}

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: