diff --git a/package.json b/package.json index a51fbba..ca65bc9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "render-hooks", - "version": "0.2.0", + "version": "0.2.1", "description": "Inline render-block-stable React hooks", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/src/index.tsx b/src/index.tsx index abb0b83..d59839c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -47,16 +47,44 @@ type CoreHelpers = typeof coreHelpers; /* ----------------------------------------------------------- * * 4 ▸ default component * * ----------------------------------------------------------- */ -export default function RenderHooks< - TValue extends Record = {}, ->(props: { - hooks?: TValue; +type HooksMap = Record + +type RenderHooksProps = { + /** + * Optionally pass in a map of hooks to use. + * + * @example + * + * ```tsx + * 'something', + * }}> + * {({ useSomething }) => { + * const something = useSomething(); + * return ( + * <> + *
{something}
+ * + * ); + * }} + *
+ * ``` + */ + hooks?: { + [K in keyof TValue]: TValue[K] extends Fn ? TValue[K] : `Please provide a valid function` + } children: (helpers: CoreHelpers & TValue) => React.ReactNode; -}): React.ReactElement { - const { hooks, children } = props; +} + +export default function RenderHooks({ + children, + hooks = {} as TValue, +}: RenderHooksProps): React.ReactElement { const helpers = React.useMemo( () => ({ ...coreHelpers, ...(hooks ?? {}) }), [hooks], ) as CoreHelpers & TValue; + return <>{children(helpers)}; } + diff --git a/src/stories/02-CustomHooks.stories.tsx b/src/stories/02-CustomHooks.stories.tsx index 99562df..11ffbe9 100644 --- a/src/stories/02-CustomHooks.stories.tsx +++ b/src/stories/02-CustomHooks.stories.tsx @@ -28,7 +28,6 @@ const useDebounce = (value: T, delay: number): T => { export function CustomHooksExample() { return ( <$ hooks={{ useToggle, useDebounce }}> - {/* @ts-ignore */} {({ useToggle, useDebounce, useState }) => { // Added useState for completeness const [open, toggle] = useToggle(false); const dOpen = useDebounce(open, 250);