API های وب – قلاب های سفارشی

Summarize this content to 400 words in Persian Lang
می توانید تمام کدها را در این پست در repo Github پیدا کنید.

چالش‌های قلاب سفارشی React مربوط به APIهای وب

useLocalStorage()

import { useState, useEffect } from “react”;

function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (err) {
console.error(`Error reading localStorage key “${key}”:`, error);
return initialValue;
}
});

useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(storedValue));
} catch (err) {
console.error(`Error writing localStorage key “${key}”:`, error);
}
}, [key, storedValue]);

const setValue = (value) => {
try {
const valueToStore =
value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
} catch (err) {
console.error(`Error setting localStorage key “${key}”:`, error);
}
};

const removeValue = () => {
try {
window.localStorage.removeItem(key);
setStoredValue(initialValue);
} catch (error) {
console.error(`Error removing localStorage key “${key}”:`, error);
}
};

return [storedValue, setValue, removeValue];
}

function LocalStorageExample() {
const [name, setName, removeName] = useLocalStorage(“name”, “John Doe”);

return (
<div>
<h2>Local Storage Exampleh2>
<p>Stored Name: {name}p>
<input
type=”text”
value={name}
onChange={(e) => setName(e.target.value)}
placeholder=”Enter your name”
/>
<button onClick={removeName}>Remove Namebutton>
div>
);
}

export default function App() {
return (
<div>
<h1>Using useLocalStorage Hookh1>
<LocalStorageExample />
div>
);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import { useState, useEffect } from "react";

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (err) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(storedValue));
    } catch (err) {
      console.error(`Error writing localStorage key “${key}”:`, error);
    }
  }, [key, storedValue]);

  const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
    } catch (err) {
      console.error(`Error setting localStorage key “${key}”:`, error);
    }
  };

  const removeValue = () => {
    try {
      window.localStorage.removeItem(key);
      setStoredValue(initialValue);
    } catch (error) {
      console.error(`Error removing localStorage key “${key}”:`, error);
    }
  };

  return [storedValue, setValue, removeValue];
}

function LocalStorageExample() {
  const [name, setName, removeName] = useLocalStorage("name", "John Doe");

  return (
    <div>
      <h2>Local Storage Exampleh2>
      <p>Stored Name: {name}p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button onClick={removeName}>Remove Namebutton>
    div>
  );
}

export default function App() {
  return (
    <div>
      <h1>Using useLocalStorage Hookh1>
      <LocalStorageExample />
    div>
  );
}