https://github.com/zero-dependency/react
⚛️ React hooks, utilities
https://github.com/zero-dependency/react
Last synced: 7 months ago
JSON representation
⚛️ React hooks, utilities
- Host: GitHub
- URL: https://github.com/zero-dependency/react
- Owner: zero-dependency
- License: mit
- Created: 2023-04-04T06:00:18.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-30T11:41:18.000Z (about 2 years ago)
- Last Synced: 2024-03-31T08:29:32.470Z (about 2 years ago)
- Language: TypeScript
- Size: 117 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @zero-dependency/react
[](https://npm.im/@zero-dependency/react)
[](https://bundlephobia.com/package/@zero-dependency/react@latest)
## Installation
```sh
npm install @zero-dependency/react
```
```sh
yarn add @zero-dependency/react
```
```sh
pnpm add @zero-dependency/react
```
## Usage
```tsx
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('users', [])
function addUser(user: User) {
setUsers((prevState) => [...prevState, user])
}
return (
addUser({ name: 'John Doe' })}>Add
resetUsers()}>Reset
)
}
// cookie
interface Cookie {
theme: 'dark' | 'light'
}
function App() {
const [cookies, { setCookie, removeCookie }] = useCookie({
initialValue: {
theme: 'dark'
},
attributes: {
maxAge: 60 * 60 * 24 * 7 // 1 week
}
})
return (
{cookies.theme}
setCookie('theme', 'dark')}>Dark
setCookie('theme', 'light')}>Light
removeCookie('theme')}>Remove
)
}
// 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('#root')!
// this is a helper function to create a tree of components
createRoot(root).render(
[
wrapper(StrictMode),
wrapper(SWRConfig, {
value: {
refreshInterval: 3000,
fetcher: (resource, init) =>
fetch(resource, init).then((res) => res.json())
}
}),
wrapper(Router),
wrapper(Layout)
]}
>
)
// instead of
createRoot(root).render(
fetch(resource, init).then(res => res.json())
}}
>
)
// createProvider
interface Counter {
count: number
setCount: React.Dispatch>
}
const [useCounter, CounterProvider] = createProvider('Counter')
function Counter() {
const { count, setCount } = useCounter()
return (
{count}
setCount(count + 1)}>
Increment
)
}
function App() {
const [count, setCount] = useState(0)
return (
)
}
```