react-store-input 0.1.3 → 0.1.5

package/README.md

@@ -14,29 +14,29 @@ This is a simple example of how to use this package.
 import { useFormStore } from "dn-react-input";
 
 export default function App() {
-    const store = useFormStore({
-        email: "",
-        password: "",
-    });
-
-    const submit = async () => {
-        const { email, password } = store.state;
-
-        alert(`Email: ${email}\nPassword: ${password}`);
-    };
-
-    return (
-        <form
-            onSubmit={(e) => {
-                e.preventDefault();
-                submit();
-            }}
-        >
-            <store.input name="email" type="email" />
-            <store.input name="password" type="password" />
-            <button type="submit">Submit</button>
-        </form>
-    );
+  const store = useFormStore({
+    email: "",
+    password: "",
+  });
+
+  const submit = async () => {
+    const { email, password } = store.state;
+
+    alert(`Email: ${email}\nPassword: ${password}`);
+  };
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        submit();
+      }}
+    >
+      <store.input name="email" type="email" />
+      <store.input name="password" type="password" />
+      <button type="submit">Submit</button>
+    </form>
+  );
 }
 ```
 
@@ -96,20 +96,20 @@ function Component() {
 }
 ```
 
-If you want to avoid passing the store to each input component, use `useStoreInput`. This hook provides input components that are already connected to the store.
+If you want to avoid passing the store to each input component, use `useStoreComponent`. This hook provides input components that are already connected to the store.
 
 ```tsx
-import { useStoreInput } from "dn-react-input";
+import { useStoreComponent } from "dn-react-input";
 
 function Component() {
     ...
-    const Input = useStoreInput(store);
+    const component = useStoreComponent(store);
 
     return (
         <form>
-            <Input.input name="email" type="email" />
-            <Input.input name="password" type="password" />
-            <Input.input name="rememberMe" type="checkbox" />
+            <component.input name="email" type="email" />
+            <component.input name="password" type="password" />
+            <component.input name="rememberMe" type="checkbox" />
         </form>
     );
 }
@@ -169,6 +169,28 @@ function Component() {
 }
 ```
 
+`Store.render` is a shortcut for `createRender` when you use `useFormStore`.
+
+```tsx
+function Component() {
+  const store = useFormStore({
+    email: "",
+    password: "",
+  });
+
+  return (
+    <div>
+      {store.render((state) => (
+        <p>{state.email}</p>
+      ))}
+      {store.render((state) => (
+        <p>{state.password}</p>
+      ))}
+    </div>
+  );
+}
+```
+
 ## How to subscribe to state changes?
 
 You can subscribe to state changes using the `subscribe` method of the store.
@@ -220,3 +242,44 @@ function Component() {
     return <button onClick={updateEmail}>Update Email</button>;
 }
 ```
+
+## How to create custom input components?
+
+You can create custom input components using the `useStoreInput` hook. This hook provides the necessary props to connect your custom input component to the store: `name`, `value`, `defaultValue`, `defaultChecked`, `onChange`, and `ref` which already subscribed to the store.
+
+```tsx
+import { useStoreInput } from "dn-react-input";
+
+function CustomInput({ store }: { store: Store<{ email: string }> }) {
+  const inputProps = useStoreInput(store, {
+    name: "email",
+  });
+
+  return <input {...inputProps} />;
+}
+```
+
+## How to creatre custom controller components?
+
+If your custom component is not an html input element, you can use the `useStoreController` hook. This hook provides the necessary props to connect your custom controller component to the store: `ref`, `onSubscribe`, and `onDispatch`.
+
+```tsx
+import { useStoreController } from "dn-react-input";
+
+type State = {
+  count: number;
+};
+
+function CustomController({ store }: { store: Store<State> }) {
+  const controllerProps = useStoreController<HTMLDivElement, State>(store, {
+    onSubscribe: (state, element) => {
+      element.textContent = `Count: ${state.count}`;
+    },
+    onDispatch: (state, element) => {
+      state.count += Number(element.textContent.replace("Count: ", ""));
+    },
+  });
+
+  return <div {...controllerProps} />;
+}
+```

package/dist/index.js

@@ -121,18 +121,8 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 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)();
-  (0, import_react4.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -153,7 +143,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -240,7 +229,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -295,23 +283,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/index.mjs

@@ -70,21 +70,11 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 }
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+import { useId, useImperativeHandle, useRef as useRef2 } from "react";
 function useStoreController(store, props) {
   const ref = useRef2(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -105,7 +95,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -192,7 +181,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -249,23 +237,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/use_form_store.js

@@ -130,18 +130,8 @@ var import_date_fns = require("date-fns");
 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)();
-  (0, import_react5.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -162,7 +152,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -247,7 +236,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -300,23 +288,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react8.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react8.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react8.default.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/use_form_store.mjs

@@ -93,21 +93,11 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef as useRef2 } from "react";
+import { useId, useImperativeHandle, useRef as useRef2 } from "react";
 function useStoreController(store, props) {
   const ref = useRef2(null);
+  useImperativeHandle(props.ref, () => ref.current, []);
   const dispatchKey = useId();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -128,7 +118,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -213,7 +202,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -266,23 +254,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React2.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React2.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React2.createElement("textarea", { ...props, ...storeProps });
 }
 

package/dist/use_store_component.d.mts

@@ -14,8 +14,8 @@ declare function useStoreComponent<TState>(store: Store<TState>): {
 type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
     store: Store<TState>;
 };
-declare function Input<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
-declare function Select<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
-declare function Textarea<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+declare function Input<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
+declare function Select<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
+declare function Textarea<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
 
 export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };

package/dist/use_store_component.d.ts

@@ -14,8 +14,8 @@ declare function useStoreComponent<TState>(store: Store<TState>): {
 type StoreComponentPropsWithStore<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = StoreComponentProps<TElement, TState> & {
     store: Store<TState>;
 };
-declare function Input<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
-declare function Select<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
-declare function Textarea<TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
+declare function Input<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState>): React__default.JSX.Element;
+declare function Select<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState>): React__default.JSX.Element;
+declare function Textarea<TState>({ store, getter, setter, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState>): React__default.JSX.Element;
 
 export { Input, Select, type StoreComponentProps, type StoreComponentPropsWithStore, Textarea, useStoreComponent };

package/dist/use_store_component.js

@@ -60,18 +60,8 @@ 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)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -92,7 +82,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -177,7 +166,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -230,23 +218,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react5.default.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react5.default.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ import_react5.default.createElement("textarea", { ...props, ...storeProps });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/use_store_component.mjs

@@ -9,7 +9,7 @@ import "react";
 import { format } from "date-fns";
 
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -25,18 +25,8 @@ 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();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -57,7 +47,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -142,7 +131,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -195,23 +183,29 @@ function useStoreComponent(store) {
 }
 function Input({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
 function Select({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
 function Textarea({
   store,
+  getter,
+  setter,
   ...props
 }) {
-  const storeProps = useStoreInputWithName(store, props);
+  const storeProps = useStoreInputWithName(store, { ...props, getter, setter });
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 export {

package/dist/use_store_controller.d.mts

@@ -8,7 +8,6 @@ type StoreControllerProps<TController, TState> = {
     onDispatch: (state: TState, element: TController) => void;
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    dispatchKey: string;
     ref: React.RefObject<TController | null>;
     onChange: () => void;
 };

package/dist/use_store_controller.d.ts

@@ -8,7 +8,6 @@ type StoreControllerProps<TController, TState> = {
     onDispatch: (state: TState, element: TController) => void;
 };
 declare function useStoreController<TController, TState>(store: Store<TState>, props: StoreControllerProps<TController, TState>): {
-    dispatchKey: string;
     ref: React.RefObject<TController | null>;
     onChange: () => void;
 };

package/dist/use_store_controller.js

@@ -39,18 +39,8 @@ 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)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -71,7 +61,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };

package/dist/use_store_controller.mjs

@@ -1,5 +1,5 @@
 // src/use_store_controller.tsx
-import { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -15,18 +15,8 @@ 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();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -47,7 +37,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };

package/dist/use_store_input.d.mts

@@ -15,7 +15,6 @@ type StoreInputProps<TInputElement, TState> = {
 };
 declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
     ref: React$1.RefObject<TInputElement | null>;
-    dispatchKey: string;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.d.ts

@@ -15,7 +15,6 @@ type StoreInputProps<TInputElement, TState> = {
 };
 declare function useStoreInput<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: StoreInputProps<TInputElement, TState>): {
     ref: React$1.RefObject<TInputElement | null>;
-    dispatchKey: string;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input.js

@@ -43,18 +43,8 @@ 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)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -75,7 +65,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -160,7 +149,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     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 { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -19,18 +19,8 @@ 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();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -51,7 +41,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -136,7 +125,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input_with_name.d.mts

@@ -8,7 +8,6 @@ type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>,
 declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
-    dispatchKey: string;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.d.ts

@@ -8,7 +8,6 @@ type Props<TInputElement, TState> = Omit<StoreInputProps<TInputElement, TState>,
 declare function useStoreInputWithName<TInputElement extends HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, TState>(store: Store<TState>, props: Props<TInputElement, TState>): {
     name: string | undefined;
     ref: React.RefObject<TInputElement | null>;
-    dispatchKey: string;
     defaultValue: string | number | readonly string[] | undefined;
     defaultChecked: boolean | undefined;
     onChange: (event: React.ChangeEvent<TInputElement>) => void;

package/dist/use_store_input_with_name.js

@@ -45,18 +45,8 @@ 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)();
-  (0, import_react2.useEffect)(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -77,7 +67,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -162,7 +151,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

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 { useEffect as useEffect2, useId, useRef } from "react";
+import { useId, useImperativeHandle, useRef } from "react";
 
 // src/use_subscribe.tsx
 import { useEffect } from "react";
@@ -19,18 +19,8 @@ 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();
-  useEffect2(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (typeof props.ref === "function") {
-      props.ref(element);
-    } else if (props.ref) {
-      props.ref.current = element;
-    }
-  }, []);
   useSubscribe(store, (state, key) => {
     if (key === dispatchKey) {
       return;
@@ -51,7 +41,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -136,7 +125,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/package.json

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