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

$3

``sh
pnpm add puro
`

$3

`tsx
// 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)
`

$3

`tsx
// _app.tsx
import type { AppProps } from "next/app"

import { ViewProvider } from "~providers/view-provider"

function CoolApp({ Component, pageProps }: AppProps) {
return (



)
}

export default CoolApp
`

$3

`tsx
// components/set-coordinate.tsx
import type { AppProps } from "next/app"

import { useView } from "~providers/view-provider"

export function XInput() {
const { x, setX } = useView()
return setX(e.target.value)} />
}

export function YInput() {
const { x, setY } = useView()
return setY(e.target.value)} />
}
`

Development

$3

`sh


install deps

pnpm i

run dev server

pnpm dev
`

$3

`
pnpm test
`

Publish process

1. Commit any changes to the repository.
2. pnpm version patch | minor | major
3. pnpm publish`

Support

The Battle Station is open for ambassadors.

License

MIT ⭐ Plasmo Corp.