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 { createProvider } from "puro"
import { useContext, useState } from "react"
// 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 type { AppProps } from "next/app"
import { ViewProvider } from "~providers/view-provider"
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 type { AppProps } from "next/app"
import { useView } from "~providers/view-provider"
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 | major
pnpm publish
Support
The Battle Station is open for ambassadors.