seitu/dist/react/components/index.mjs

import { useSubscription } from "../hooks/index.mjs";
//#region src/react/components/index.tsx
/**
* Subscribes to a value and passes it to `children`. Prefer over the hook when
* you want a component API.
*
* @example Basic usage
* ```tsx twoslash title="/app/page.tsx"
* 'use client'
*
* import { createWebStorage } from 'seitu/web'
* import { Subscription } from 'seitu/react'
* import * as z from 'zod'
*
* const sessionStorage = createWebStorage({
*   type: 'sessionStorage',
*   schemas: { count: z.number(), name: z.string() },
*   defaultValues: { count: 0, name: '' },
* })
*
* export default function Page() {
*   return (
*     <Subscription value={sessionStorage}>
*       {(value) => <div>{value.count}</div>}
*     </Subscription>
*   )
* }
* ```
*
* @example With selector
* ```tsx twoslash title="/app/page.tsx"
* 'use client'
*
* import { createWebStorage } from 'seitu/web'
* import { Subscription } from 'seitu/react'
* import * as z from 'zod'
*
* const sessionStorage = createWebStorage({
*   type: 'sessionStorage',
*   schemas: { count: z.number(), name: z.string() },
*   defaultValues: { count: 0, name: '' },
* })
*
* export default function Page() {
*   return (
*     <Subscription value={sessionStorage} selector={(v) => v.count}>
*       {(count) => <div>{count}</div>}
*     </Subscription>
*   )
* }
* ```
*/
function Subscription({ value, selector, children }) {
	return children(useSubscription(value, { selector }));
}
//#endregion
export { Subscription };