![npm license](https://camo.githubusercontent.com/05593f68ada3187737ba634f244d89dd22ac56a5582791abb6aca0cf6727d7b6/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f6c2f407a65726f2d646570656e64656e63792f7265616374)
npm install @zero-dependency/react
yarn add @zero-dependency/react
pnpm add @zero-dependency/react
import {
namedLazy,
useLocalStorage,
useSessionStorage,
useCookie,
ProviderTree,
createProvider
} from '@zero-dependency/react'
// React.lazy
const LazyComponent = namedLazy(() => import('./LazyComponent'), 'LazyComponent')
// localStorage/sessionStorage
interface User {
name: string
}
function App() {
const [users, { setUsers, resetUsers }] = useLocalStorage<User[]>('users', [])
function addUser(user: User) {
setUsers((prevState) => [...prevState, user])
}
return (
<div>
<button onClick={() => addUser({ name: 'John Doe' })}>Add</button>
<button onClick={() => resetUsers()}>Reset</button>
</div>
)
}
// cookie
interface Cookie {
theme: 'dark' | 'light'
}
function App() {
const [cookies, { setCookie, removeCookie }] = useCookie<Cookie>({
initialValue: {
theme: 'dark'
},
attributes: {
maxAge: 60 * 60 * 24 * 7 // 1 week
}
})
return (
<div>
<h1>{cookies.theme}</h1>
<button onClick={() => setCookie('theme', 'dark')}>Dark</button>
<button onClick={() => setCookie('theme', 'light')}>Light</button>
<button onClick={() => removeCookie('theme')}>Remove</button>
</div>
)
}
// ProviderTree edge case
import { StrictMode } from 'react'
import { SWRConfig } from 'swr'
import { createRoot } from 'react-dom/client'
import App from './App'
import Layout from './Layout'
import Router from './Router'
const root = document.querySelector<HTMLElement>('#root')!
// this is a helper function to create a tree of components
createRoot(root).render(
<ProviderTree
providers={(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 of
createRoot(root).render(
<StrictMode>
<SWRConfig
value={{
refreshInterval: 3000,
fetcher: (resource, init) =>
fetch(resource, init).then(res => res.json())
}}
>
<Router>
<Layout>
<App />
</Layout>
</Router>
</SWRConfig>
</StrictMode>
)
// createProvider
interface Counter {
count: number
setCount: React.Dispatch<React.SetStateAction<number>>
}
const [useCounter, CounterProvider] = createProvider<Counter>('Counter')
function Counter() {
const { count, setCount } = useCounter()
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
)
}
function App() {
const [count, setCount] = useState(0)
return (
<CounterProvider value={{ count, setCount }}>
<Counter />
</CounterProvider>
)
}