A simple utility library to create react context/provider with proper typing support
puro – simple react context provider
puro is a react typescript utility library from plasmo to create react context with minimal boilerplate using the react hook API.
Usage
Install
pnpm add puro
Create a provider and hook pairs:
// providers/view-provider.tsx
import { useContext, useState } from "react"
import { createProvider } from "puro"
// A simple example of a provider hook
const useViewProvider = () => {
const [x, _setX] = useState(0)
const [y, _setY] = useState(0)
return {
x,
y,
setX:(newX: string | number) => _setX(parseFloat(newX)),
setY:(newY: string | number) => _setY(parseFloat(newY))
}
}
const { BaseContext, Provider } = createProvider(useViewProvider)
export const ViewProvider = Provider
export const useView = () => useContext(BaseContext)
Wrap your top component with the provider, here’s a NextJS example using _app.tsx:
// _app.tsx
import { ViewProvider } from "~providers/view-provider"
import type { AppProps } from "next/app"
function CoolApp({ Component, pageProps }: AppProps) {
return (
<ViewProvider>
<Component {...pageProps} />
</ViewProvider>
)
}
export default CoolApp
Use the context hook in your component
// components/set-coordinate.tsx
import { useView } from "~providers/view-provider"
import type { AppProps } from "next/app"
export function XInput() {
const { x, setX } = useView()
return (
<input value={x} onChange={(e)=> setX(e.target.value)}/>
)
}
export function YInput() {
const { x, setY } = useView()
return (
<input value={y} onChange={(e)=> setY(e.target.value)}/>
)
}
Development
Terminal 1:
# install deps
pnpm i
# run dev server
pnpm dev
Terminal 2:
pnpm test
Publish process
- Commit any changes to the repository.
pnpm version patch | minor | majorpnpm publish
Support
The Battle Station is open for ambassadors.