@diskette/use-render 0.4.0 → 0.5.0

package/README.md

@@ -69,7 +69,7 @@ function Button(props: ButtonProps) {
 
 ```tsx
 <Button
-  render={(state, props) => (
+  render={(props, state) => (
     <a {...props} href="/path" data-pressed={state.isPressed} />
   )}
 >
@@ -184,12 +184,12 @@ type StyleResolver<S> =
   | undefined
 ```
 
-### `Renderer<T, S>`
+### `Renderer<S>`
 
 ```ts
-type Renderer<T extends ElementType, S> = (
-  state: S,
+type Renderer<S> = (
   props: ComponentPropsWithRef<T>,
+  state: S,
 ) => ReactNode
 ```
 

package/dist/types.d.ts

@@ -1,8 +1,8 @@
 import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactNode } from 'react';
 export type ClassNameResolver<State> = ((state: State, baseClassName?: string) => string | undefined) | string | undefined;
 export type StyleResolver<State> = ((state: State, baseStyle?: CSSProperties) => CSSProperties | undefined) | CSSProperties | undefined;
-export type Renderer<S> = (state: S, props: React.HTMLAttributes<any> & {
+export type Renderer<S> = (props: React.HTMLAttributes<any> & {
     ref?: React.Ref<any> | undefined;
-}) => ReactNode;
+}, state: S) => ReactNode;
 export type DataAttributes = Record<`data-${string}`, string | number | boolean>;
 export type BaseComponentProps<T extends ElementType> = Omit<ComponentPropsWithRef<T>, 'children' | 'className' | 'style'>;

package/dist/use-render.js

@@ -49,12 +49,12 @@ export function useRender(tag, state, options) {
     if (isValidElement(render)) {
         return cloneElement(render, resolvedProps, resolvedChildren);
     }
-    // For `<Component render={(state, props) => <a {...props} />)} />`
+    // For `<Component render={(props) => <a {...props} />)} />`
     if (isFunction(render)) {
-        return render(state, {
+        return render({
             ...resolvedProps,
             children: resolvedChildren,
-        });
+        }, state);
     }
     return createElement(tag, resolvedProps, resolvedChildren ?? baseChildren);
 }

package/dist/use-render.test.jsx

@@ -126,9 +126,9 @@ describe('useRender', () => {
             await expect.element(link).toHaveTextContent('Link');
             await expect.element(link).toHaveAttribute('href', '/path');
         });
-        test('render function receives state and props', async () => {
+        test('render function receives props and state', async () => {
             const Button = createBtn();
-            const { getByRole } = await render(<Button className="custom" render={(state, props) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
+            const { getByRole } = await render(<Button className="custom" render={(props, state) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
                         e.preventDefault();
                         props.onClick?.(e);
                     }}/>)}>
@@ -153,7 +153,7 @@ describe('useRender', () => {
         });
         test('function render prop with children as function', async () => {
             const Button = createBtn();
-            const { getByRole } = await render(<Button render={(state, props) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
+            const { getByRole } = await render(<Button render={(props, state) => (<a {...props} href="/path" data-active={state.isActive} onClick={(e) => {
                         e.preventDefault();
                         props.onClick?.(e);
                     }}/>)}>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diskette/use-render",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "exports": "./dist/index.js",
   "files": [
     "dist"