useLocalStorage the custom hook

strapped this together to help save and retrieve the `user-theme` and `token` from the localstorage

was working on a react vite app and had to port it over to Next Js the ported next js app and i very quickly discovered that localStorage worked a little differently n Nextjs and i need it because that's where i was saving my personal access token and theme preferences which lead me down a rabbit hole which resulted in the following custom hook for that

typescript

1
2
3import { useState,useEffect,useReducer } from 'react';
4import { Viewer } from './../types/usertypes';
5
6interface State{
7token:string|null
8theme:string|null
9mainuser?:Viewer
10error?:string
11}
12
13
14export const useLocalStorge=()=>{
15
16const [loading, setLoading] = useState(true);
17const [ state,dispatch] = useReducer(generalReducer,undefined);
18useEffect(() => {
19 const gen = window.localStorage.general; 
20 if(gen){
21  dispatch({ type: "INIT", payload: JSON.parse(gen) });
22 }
23 setLoading(false)
24}, [])
25
26
27useEffect(() => {
28  const colorTheme = state?.theme === "dark" ? "light" : "dark";
29  const root = window.document.documentElement;
30    // console.log("colorTheme ==== ", colorTheme);
31  root.classList.remove(colorTheme);
32  // console.log("theme reset to ==== ",state?.theme)
33  if(state?.theme){
34    root.classList.add(state?.theme);
35  }
36
37}, [state?.theme]);
38
39
40
41useEffect(() => {
42if(state)
43window.localStorage.setItem("general",JSON.stringify(state))
44}, [state])
45
46return {loading ,state ,dispatch}
47}
48
49
50
51
52
53
54function generalReducer(state:State, action:any) {
55switch (action.type) {
56
57  case "INIT":
58    return action.payload;
59  case "THEME":
60    return {...state,theme:action.payload}
61  case "TOKEN":
62    return {...state,token:action.payload}  
63  case "ERROR":
64    return {...state,error:action.payload} 
65   
66  default:
67    return state;
68}
69}
70
71

and you consume it like

typescript

1import "../styles/globals.css";
2import type { AppProps } from "next/app";
3import { ReactQueryDevtools } from "react-query/devtools";
4import { QueryClient, QueryClientProvider } from "react-query";
5import { Layout } from "../components/Layout";
6import { useLocalStorge } from "./../utils/hooks/useLocalStorge";
7import GlobalContext from "../utils/context/GlobalsContext";
8
9const queryClient = new QueryClient({
10  defaultOptions: {
11    queries: {
12      refetchOnWindowFocus: false,
13      refetchOnMount: false,
14      refetchOnReconnect: false,
15      retry: false,
16      staleTime: 5 * 60 * 1000,
17    },
18  },
19});
20
21function MyApp({ Component, pageProps }: AppProps) {
22  const local = useLocalStorge();
23  // console.log("local state ==== ",local?.state)
24
25  // console.log("initial value in local storage ==== ", value);
26
27  return (
28    <QueryClientProvider client={queryClient}>
29      <GlobalContext.Provider
30        value={{ value: local?.state, updateValue: local?.dispatch }}
31      >
32        <Layout local={local}>
33          <Component {...pageProps} />
34          <ReactQueryDevtools />
35        </Layout>
36      </GlobalContext.Provider>
37    </QueryClientProvider>
38  );
39}
40
41export default MyApp;
42
43

the cotext is optonnal but it looks like this

typescript

1import React, { Dispatch } from "react";
2import { Viewer } from './../types/usertypes';
3
4export interface Value {
5  token: string | null;
6  theme:string
7  error?: string;
8  mainuser?:Viewer
9}
10interface Type {
11  value: Value;
12  updateValue:Dispatch<any>
13}
14
15const init_data: Type = {
16  value:{token:null,theme:"light"},
17  updateValue: (any) => {},
18};
19
20const GlobalContext = React.createContext(init_data);
21export default GlobalContext;
22

final project looks like

Must have Custom hooks for NextJs

Deno desktop Better Auth intergration

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

Must have Custom hooks for NextJs

Deno desktop Better Auth intergration

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

useLocalStorage the custom hook

strapped this together to help save and retrieve the `user-theme` and `token` from the localstorage

More posts

Deno desktop Better Auth intergration

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

More posts

Deno desktop Better Auth intergration

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

useLocalStorage the custom hook

strapped this together to help save and retrieve the user-theme and token from the localstorage

strapped this together to help save and retrieve the `user-theme` and `token` from the localstorage