React Context Boilerplate in TypeScript

React Context Typescript 模板，包括 createContext, ContextProvider, useContext:

const useAppStore = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true)
  
   const toggleLoading = useCallback(() => {
       setIsLoading(prev => !prev)
   }, [])

   return {
      isLoading,
      setIsLoading,
      toggleLoading 
   }
}

export type AppType = returnType(useAppStore)

const AppContext = createContext<AppType>({} as AppType)

export const useAppContext = () => useContext(Appcontext)

export default function AppProvider({children}: {children: React.ReactNode}) {
    return (<AppContext.Provider>{childrn}</AppContext.Provider>)
}

How to use:

export default function App({children}: {children: React.ReactNode}){
  return (
    <AppProvider value={useAppStore()}>
      {childrn}
    </AppProvider>
  )
}