react-store-input 0.1.7 → 0.1.8

package/dist/index.js

@@ -118,22 +118,17 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 // src/use_store_controller.tsx
 var import_react4 = require("react");
 function useStoreController(store, props) {
-  const ref = (0, import_react4.useRef)(null);
-  (0, import_react4.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react4.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -141,7 +136,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
@@ -149,7 +143,7 @@ function useStoreController(store, props) {
 // src/use_store_input.tsx
 var import_react5 = require("react");
 var import_date_fns = require("date-fns");
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -196,8 +190,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -214,7 +211,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -223,7 +224,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -234,8 +234,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -293,7 +293,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -310,7 +311,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -327,7 +329,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react6.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/index.mjs

@@ -70,24 +70,19 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 }
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef as useRef2 } from "react";
+import { useId } from "react";
 function useStoreController(store, props) {
-  const ref = useRef2(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -95,7 +90,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
@@ -103,7 +97,7 @@ function useStoreController(store, props) {
 // src/use_store_input.tsx
 import "react";
 import { format } from "date-fns";
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -150,8 +144,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -168,7 +165,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -177,7 +178,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -188,8 +188,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -212,7 +212,7 @@ function useStoreInputWithName(store, props) {
 }
 
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 import React from "react";
 function useStoreComponent(store) {
   const input = useCallback(
@@ -247,7 +247,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -264,7 +265,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -281,7 +283,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_form_store.js

@@ -129,22 +129,17 @@ var import_date_fns = require("date-fns");
 // src/use_store_controller.tsx
 var import_react5 = require("react");
 function useStoreController(store, props) {
-  const ref = (0, import_react5.useRef)(null);
-  (0, import_react5.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react5.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -152,13 +147,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -205,8 +199,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -223,7 +220,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -232,7 +233,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -243,8 +243,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -300,7 +300,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -317,7 +318,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -334,7 +336,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react7.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_form_store.mjs

@@ -83,7 +83,7 @@ function useStore(initialState) {
 }
 
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef as useRef2 } from "react";
 import React2 from "react";
 
 // src/use_store_input.tsx
@@ -91,24 +91,19 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef as useRef2 } from "react";
+import { useId } from "react";
 function useStoreController(store, props) {
-  const ref = useRef2(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -116,13 +111,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -169,8 +163,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -187,7 +184,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -196,7 +197,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -207,8 +207,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -264,7 +264,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -281,7 +282,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -298,7 +300,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef2(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_store_component.js

@@ -59,22 +59,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -82,13 +77,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -135,8 +129,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -153,7 +150,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -162,7 +163,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -173,8 +173,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -230,7 +230,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -247,7 +248,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -264,7 +266,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = (0, import_react4.useRef)(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_store_component.mjs

@@ -1,5 +1,5 @@
 // src/use_store_component.tsx
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import React from "react";
 
 // src/use_store_input.tsx
@@ -7,7 +7,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -22,22 +22,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -45,13 +40,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -98,8 +92,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -116,7 +113,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -125,7 +126,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -136,8 +136,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {
@@ -193,7 +193,8 @@ function Input({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -210,7 +211,8 @@ function Select({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,
@@ -227,7 +229,8 @@ function Textarea({
   toStateValue,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, {
+  const ref = useRef(null);
+  const storeProps = useStoreInputWithName(ref, store, {
     ...props,
     getter,
     setter,

package/dist/use_store_controller.d.mts

@@ -1,14 +1,10 @@
-import * as React from 'react';
-import { Ref } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreControllerProps<TController, TState> = {
-    ref?: Ref<TController>;
-    onSubscribe: (state: TState, element: TController) => void;
-    onDispatch: (state: TState, element: TController) => void;
+type StoreControllerProps<TState> = {
+    onSubscribe: (state: TState) => void;
+    onDispatch: (state: TState) => void;
 };
-declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    ref: React.RefObject<TController | null>;
+declare function useStoreController<TState>(store: Store<TState>, props: StoreControllerProps<TState>): {
     dispatch: () => void;
 };
 

package/dist/use_store_controller.d.ts

@@ -1,14 +1,10 @@
-import * as React from 'react';
-import { Ref } from 'react';
 import { Store } from './use_store.js';
 
-type StoreControllerProps<TController, TState> = {
-    ref?: Ref<TController>;
-    onSubscribe: (state: TState, element: TController) => void;
-    onDispatch: (state: TState, element: TController) => void;
+type StoreControllerProps<TState> = {
+    onSubscribe: (state: TState) => void;
+    onDispatch: (state: TState) => void;
 };
-declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    ref: React.RefObject<TController | null>;
+declare function useStoreController<TState>(store: Store<TState>, props: StoreControllerProps<TState>): {
     dispatch: () => void;
 };
 

package/dist/use_store_controller.js

@@ -38,22 +38,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -61,7 +56,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }

package/dist/use_store_controller.mjs

@@ -1,5 +1,5 @@
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -14,22 +14,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -37,7 +32,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }

package/dist/use_store_input.d.mts

@@ -1,9 +1,7 @@
-import * as React$1 from 'react';
-import { Ref, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, RefObject } from 'react';
 import { Store } from './use_store.mjs';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
-    ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
     value?: string | number | readonly string[] | undefined;
@@ -15,8 +13,7 @@ type StoreInputProps<TInputElement, TState, TValue> = {
     toInputValue?: (value: TValue) => string;
     toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
-    ref: React$1.RefObject<TInputElement | null>;
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.d.ts

@@ -1,9 +1,7 @@
-import * as React$1 from 'react';
-import { Ref, HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, RefObject } from 'react';
 import { Store } from './use_store.js';
 
 type StoreInputProps<TInputElement, TState, TValue> = {
-    ref?: Ref<TInputElement>;
     type?: HTMLInputTypeAttribute;
     defaultValue?: string | number | readonly string[] | undefined;
     value?: string | number | readonly string[] | undefined;
@@ -15,8 +13,7 @@ type StoreInputProps<TInputElement, TState, TValue> = {
     toInputValue?: (value: TValue) => string;
     toStateValue?: (value: string) => TValue;
 };
-declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
-    ref: React$1.RefObject<TInputElement | null>;
+declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputProps<TInputElement, TState, TValue>): {
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.js

@@ -42,22 +42,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -65,13 +60,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -118,8 +112,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -136,7 +133,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -145,7 +146,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input.mjs

@@ -3,7 +3,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -18,22 +18,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -41,13 +36,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -94,8 +88,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -112,7 +109,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -121,7 +122,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input_with_name.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from 'react';
 import { Store } from './use_store.mjs';
 import { StoreInputProps } from './use_store_input.mjs';
 
@@ -6,9 +7,8 @@ type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue>
 type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
     name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
-    ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from 'react';
 import { Store } from './use_store.js';
 import { StoreInputProps } from './use_store_input.js';
 
@@ -6,9 +7,8 @@ type InferNameFromProps<TState, TName extends keyof TState | undefined, TValue>
 type StoreInputWithNameProps<TInputElement, TState, TName extends keyof TState | undefined, TValue> = Omit<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter"> & Partial<Pick<StoreInputProps<TInputElement, TState, InferNameFromProps<TState, TName, TValue>>, "getter" | "setter">> & {
     name?: TName;
 };
-declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
+declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState, TName extends keyof TState | undefined, TValue>(ref: RefObject<TInputElement | null>, store: Store<TState>, props: StoreInputWithNameProps<TInputElement, TState, TName, TValue>): {
     name: string | undefined;
-    ref: React.RefObject<TInputElement | null>;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.js

@@ -44,22 +44,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(props.ref, () => ref.current, []);
   const dispatchKey = (0, import_react2.useId)();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -67,13 +62,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -120,8 +114,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -138,7 +135,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -147,7 +148,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -158,8 +158,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {

package/dist/use_store_input_with_name.mjs

@@ -3,7 +3,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useId, useImperativeHandle, useRef } from "react";
+import { useId } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -18,22 +18,17 @@ function useSubscribe(store, subscriber) {
 
 // src/use_store_controller.tsx
 function useStoreController(store, props) {
-  const ref = useRef(null);
-  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
     }
-    if (!ref.current) return;
-    props.onSubscribe(state, ref.current);
+    props.onSubscribe(state);
   });
   const dispatch = () => {
     store.dispatch(
       (state) => {
-        const element = ref.current;
-        if (!element) return;
-        props.onDispatch(state, element);
+        props.onDispatch(state);
       },
       {
         key: dispatchKey
@@ -41,13 +36,12 @@ function useStoreController(store, props) {
     );
   };
   return {
-    ref,
     dispatch
   };
 }
 
 // src/use_store_input.tsx
-function useStoreInput(store, props) {
+function useStoreInput(ref, store, props) {
   const toInputValue = props.toInputValue || ((value) => {
     if (value === void 0 || value === null) {
       return "";
@@ -94,8 +88,11 @@ function useStoreInput(store, props) {
     return value;
   });
   const inputProps = useStoreController(store, {
-    ref: props.ref,
-    onSubscribe: (state, element) => {
+    onSubscribe: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && (props.type === "checkbox" || props.type === "radio")) {
         const checked = toInputChecked(props.getter(state));
         if (element.checked === checked) {
@@ -112,7 +109,11 @@ function useStoreInput(store, props) {
       const event = new Event("input", { bubbles: true });
       element.dispatchEvent(event);
     },
-    onDispatch: (state, element) => {
+    onDispatch: (state) => {
+      const element = ref.current;
+      if (!element) {
+        return;
+      }
       if ("checked" in element && props.type === "checkbox") {
         props.setter(state, element.checked);
       } else {
@@ -121,7 +122,6 @@ function useStoreInput(store, props) {
     }
   });
   return {
-    ref: inputProps.ref,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -132,8 +132,8 @@ function useStoreInput(store, props) {
 }
 
 // src/use_store_input_with_name.tsx
-function useStoreInputWithName(store, props) {
-  const inputProps = useStoreInput(store, {
+function useStoreInputWithName(ref, store, props) {
+  const inputProps = useStoreInput(ref, store, {
     ...props,
     getter: (state) => {
       if (props.getter) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-store-input",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",