@zero-dependency/react

Installation

npm install @zero-dependency/react

yarn add @zero-dependency/react

pnpm add @zero-dependency/react

Usage

import{namedLazy,useLocalStorage,useSessionStorage,useCookie,ProviderTree,createProvider}from'@zero-dependency/react'// React.lazyconstLazyComponent=namedLazy(()=>import('./LazyComponent'),'LazyComponent')// localStorage/sessionStorageinterfaceUser{name: string}functionApp(){const[users,{ setUsers, resetUsers }]=useLocalStorage<User[]>('users',[])functionaddUser(user: User){setUsers((prevState)=>[...prevState,user])}return(<div><buttononClick={()=>addUser({name: 'John Doe'})}>Add</button><buttononClick={()=>resetUsers()}>Reset</button></div>)}// cookieinterfaceCookie{theme: 'dark'|'light'}functionApp(){const[cookies,{ setCookie, removeCookie }]=useCookie<Cookie>({initialValue: {theme: 'dark'},attributes: {maxAge: 60*60*24*7// 1 week}})return(<div><h1>{cookies.theme}</h1><buttononClick={()=>setCookie('theme','dark')}>Dark</button><buttononClick={()=>setCookie('theme','light')}>Light</button><buttononClick={()=>removeCookie('theme')}>Remove</button></div>)}// ProviderTree edge caseimport{StrictMode}from'react'import{SWRConfig}from'swr'import{createRoot}from'react-dom/client'importAppfrom'./App'importLayoutfrom'./Layout'importRouterfrom'./Router'constroot=document.querySelector<HTMLElement>('#root')!// this is a helper function to create a tree of componentscreateRoot(root).render(<ProviderTreeproviders={(wrapper)=>[wrapper(StrictMode),wrapper(SWRConfig,{value: {refreshInterval: 3000,fetcher: (resource,init)=>fetch(resource,init).then((res)=>res.json())}}),wrapper(Router),wrapper(Layout)]}><App/></ProviderTree>)// instead ofcreateRoot(root).render(<StrictMode><SWRConfigvalue={{refreshInterval: 3000,fetcher: (resource,init)=>fetch(resource,init).then(res=>res.json())}}><Router><Layout><App/></Layout></Router></SWRConfig></StrictMode>)// createProviderinterfaceCounter{count: numbersetCount: React.Dispatch<React.SetStateAction<number>>}const[useCounter,CounterProvider]=createProvider<Counter>('Counter')functionCounter(){const{ count, setCount }=useCounter()return(<div><h1>{count}</h1><buttononClick={()=>setCount(count+1)}>
Increment
</button></div>)}functionApp(){const[count,setCount]=useState(0)return(<CounterProvidervalue={{ count, setCount }}><Counter/></CounterProvider>)}