1.0.11 • Published 3 years ago
react-beforeunload-state v1.0.11
How To Use beforeUnLoadState!
Structure
It checks with array0 and array1 is same or different.
If it's different, events beforeunload
.
beforeUnLoadState([[value, value], [value, value], ...]);
Example
Link : https://n54nv.csb.app/
import React, { useState, useRef, useEffect } from "react";
import { beforeUnLoadState } from "react-beforeunload-state";
const prev_content = {
til: "I Study React Hooks",
msg: "Star Me!"
};
export default function App() {
const [til, setTil] = useState("");
const [msg, setMsg] = useState("");
const prev_til = useRef("");
const prev_msg = useRef("");
// Structure : [[value, value], [value, value], [value, value], ....]
beforeUnLoadState([
[prev_til.current, til],
[prev_msg.current, msg]
]);
// ComponentDidMount
useEffect(() => {
const { til: init_til, msg: init_msg } = prev_content;
// initialize value from some responses
setTil(init_til);
setMsg(init_msg);
prev_til.current = init_til;
prev_msg.current = init_msg;
}, []);
return (
<div className="App">
<div>
<p>TIL(Today I Learned)</p>
<input value={til} onChange={(e) => setTil(e.target.value)} />
</div>
<div>
<p>Message Send</p>
<input value={msg} onChange={(e) => setMsg(e.target.value)} />
</div>
</div>
);
}