feat(hook): add useSessionStorage hook

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">Welcome to Hooks Arsenal 👋</h1>
+<h1 align="center">Welcome to Hooks Arsenal 🎣</h1>
 <p>
   <img alt="CircleCI" src="https://img.shields.io/circleci/build/github/JamesSingleton/hooks-arsenal">
   <a href="https://www.npmjs.com/package/hooks-arsenal">

src/hooks/useSessionStorage.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const useSessionStorage = (key, initialValue, raw) => {
+  const [sessionStoredValue, setSessionStoredValue] = useState(() => {
+    try {
+      const sessionStorageValue = sessionStorage.getItem(key);
+      if (typeof sessionStorageValue !== 'string') {
+        sessionStorage.setItem(key, raw ? String(initialValue) : JSON.stringify(initialValue));
+        return initialValue;
+      }
+
+      return raw ? sessionStorageValue : JSON.parse(sessionStorageValue || 'null');
+    } catch (error) {
+      return initialValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      const serializedState = raw ? String(sessionStoredValue) : JSON.stringify(sessionStoredValue);
+      sessionStorage.setItem(key, serializedState);
+    } catch (error) {
+      console.error(error);
+    }
+  });
+  return [sessionStoredValue, setSessionStoredValue];
+};
+
+export default useSessionStorage;

src/index.js

@@ -1,2 +1,3 @@
 /* eslint-disable import/prefer-default-export */
 export { default as useLocalStorage } from './hooks/useLocalStorage';
+export { default as useSessionStorage } from './hooks/useSessionStorage';