react-store-input 0.1.0 → 0.1.1

package/README.md

@@ -8,6 +8,8 @@ At the same time, it allows you to use all the attributes originally provided by
 
 ## Get Started
 
+This is a simple example of how to use this package.
+
 ```tsx
 import { useFormStore } from "dn-react-input";
 
@@ -37,3 +39,184 @@ export default function App() {
     );
 }
 ```
+
+## How to define state?
+
+You can define any state you want as an object when calling `useStore`.
+
+```tsx
+function Component() {
+    ...
+
+    const store = useStore({
+        email: "",
+        password: "",
+        rememberMe: false,
+    });
+
+    ...
+}
+```
+
+It's a single source of truth for your form state.
+
+## How to get input values?
+
+You can access the current values of the input elements through the `state` property of the store.
+
+```tsx
+function Component() {
+    ...
+
+    const submit = () => {
+        const { email, password, rememberMe } = store.state;
+    };
+
+    ...
+}
+```
+
+## How to add input elements?
+
+You can add input elements using the `Input` component provided by the store. There are 'Select' and 'Textarea' components as well.
+
+```tsx
+import { Input } from "dn-react-input";
+
+function Component() {
+    ...
+
+    return (
+        <form>
+            <Input store={store} name="email" type="email" />
+            <Input store={store} name="password" type="password" />
+            <Input store={store} name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+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.
+
+```tsx
+import { useStoreInput } from "dn-react-input";
+
+function Component() {
+    ...
+    const Input = useStoreInput(store);
+
+    return (
+        <form>
+            <Input.input name="email" type="email" />
+            <Input.input name="password" type="password" />
+            <Input.input name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+`useFormStore` is a facade that combines `useStore` and `useStoreInput` for convenience.
+
+```tsx
+import { useFormStore } from "dn-react-input";
+
+function Component() {
+    ...
+    const store = useFormStore({
+        email: "",
+        password: "",
+        rememberMe: false,
+    });
+
+    return (
+        <form>
+            <store.input name="email" type="email" />
+            <store.input name="password" type="password" />
+            <store.input name="rememberMe" type="checkbox" />
+        </form>
+    );
+}
+```
+
+## How to render components on state changes?
+
+If you want to render a component only when specific parts of the state change, use the `useSelector` hook.
+
+```tsx
+import { useSelector } from "dn-react-input";
+
+function Component() {
+    ...
+    const email = useSelector(store, (state) => state.email);
+
+    return <div>Your email is: {email}</div>;
+}
+```
+
+If you want to render components in an inline manner, use the `createRender` function. By using this, you can avoid creating separate components for each part of the state you want to track.
+
+```tsx
+import { createRender } from "dn-react-input";
+
+function Component() {
+    ...
+    return (
+        <div>
+            {createRender(store, (state) => <p>{state.email}</p>)}
+            {createRender(store, (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.
+
+```tsx
+function Component() {
+    ...
+    useEffect(() => {
+        const unsubscribe = store.subscribe((state) => {
+            console.log(`State changed`, state);
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+
+    ...
+}
+```
+
+## How to update state manually?
+
+You can update the state manually using the `dispatch` method of the store.
+
+```tsx
+function Component() {
+    ...
+    const updateEmail = () => {
+        store.dispatch({ email: "ohjinsu98@icloud.com" });
+    };
+
+    return <button onClick={updateEmail}>Update Email</button>;
+}
+```
+
+The `dispatch` method uses immerjs internally to update the state, so you can also use a function to update the state based on the previous state.
+
+```tsx
+function Component() {
+    ...
+
+    const updateEmail = () => {
+        store.dispatch((state) => {
+            state.email = "ohjinsu98@icloud.com";
+        });
+    };
+
+    return <button onClick={updateEmail}>Update Email</button>;
+}
+```

package/dist/create_render.d.mts

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { Store } from './use_store.mjs';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
-declare function createRender<TState>(store: Store<TState>): CreateRender<TState>;
+declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): React__default.JSX.Element;
+declare function createRenderWithStore<TState>(store: Store<TState>): CreateRender<TState>;
 
-export { type CreateRender, createRender };
+export { type CreateRender, createRender, createRenderWithStore };

package/dist/create_render.d.ts

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 import { Store } from './use_store.js';
 
 type CreateRender<TState> = (selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean) => ReactNode;
-declare function createRender<TState>(store: Store<TState>): CreateRender<TState>;
+declare function createRender<TState>(store: Store<TState>, selector: (state: TState) => ReactNode, compare?: (a: TState, b: TState) => boolean): React__default.JSX.Element;
+declare function createRenderWithStore<TState>(store: Store<TState>): CreateRender<TState>;
 
-export { type CreateRender, createRender };
+export { type CreateRender, createRender, createRenderWithStore };

package/dist/create_render.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/create_render.tsx
 var create_render_exports = {};
 __export(create_render_exports, {
-  createRender: () => createRender
+  createRender: () => createRender,
+  createRenderWithStore: () => createRenderWithStore
 });
 module.exports = __toCommonJS(create_render_exports);
 
@@ -63,7 +64,15 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 var import_react3 = __toESM(require("react"));
-function createRender(store) {
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = useSelector(store, (state) => state, compare);
+    const content = selector(result);
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, content);
+  }
+  return /* @__PURE__ */ import_react3.default.createElement(Component, null);
+}
+function createRenderWithStore(store) {
   return function createRender2(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
@@ -75,5 +84,6 @@ function createRender(store) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createRender
+  createRender,
+  createRenderWithStore
 });

package/dist/create_render.mjs

@@ -27,7 +27,15 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 import React from "react";
-function createRender(store) {
+function createRender(store, selector, compare) {
+  function Component() {
+    const result = useSelector(store, (state) => state, compare);
+    const content = selector(result);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, content);
+  }
+  return /* @__PURE__ */ React.createElement(Component, null);
+}
+function createRenderWithStore(store) {
   return function createRender2(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
@@ -38,5 +46,6 @@ function createRender(store) {
   };
 }
 export {
-  createRender
+  createRender,
+  createRenderWithStore
 };

package/dist/index.js

@@ -164,14 +164,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = (0, import_react4.useRef)(null);
     (0, import_react4.useEffect)(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -204,17 +209,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -237,18 +248,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = (0, import_react5.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react6.default.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = (0, import_react5.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react6.default.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = (0, import_react5.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react6.default.createElement(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react5.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react6.default.createElement(Select, { store, ...props });
+  }, []);
   const textarea = (0, import_react5.useCallback)(function Component(props) {
     return /* @__PURE__ */ import_react6.default.createElement(Textarea, { store, ...props });
   }, []);
@@ -258,23 +263,32 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react6.default.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react6.default.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react6.default.createElement("textarea", { ...props, ...storeProps });
 }
 
 // src/create_render.tsx
 var import_react7 = __toESM(require("react"));
-function createRender(store) {
-  return function createRender2(selector, compare) {
+function createRenderWithStore(store) {
+  return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
@@ -294,7 +308,7 @@ function useFormStore(initialState) {
     },
     dispatch: store.dispatch,
     subscribe: store.subscribe,
-    render: createRender(store),
+    render: createRenderWithStore(store),
     ...storeInput
   };
 }

package/dist/index.mjs

@@ -124,14 +124,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = useRef2(null);
     useEffect2(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -164,17 +169,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -197,18 +208,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Input, { store, ...props });
+  }, []);
+  const select = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Select, { store, ...props });
+  }, []);
   const textarea = useCallback(function Component(props) {
     return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
   }, []);
@@ -218,23 +223,32 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }
 
 // src/create_render.tsx
 import React2 from "react";
-function createRender(store) {
-  return function createRender2(selector, compare) {
+function createRenderWithStore(store) {
+  return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
@@ -254,7 +268,7 @@ function useFormStore(initialState) {
     },
     dispatch: store.dispatch,
     subscribe: store.subscribe,
-    render: createRender(store),
+    render: createRenderWithStore(store),
     ...storeInput
   };
 }

package/dist/use_form_store.js

@@ -63,8 +63,8 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 var import_react3 = __toESM(require("react"));
-function createRender(store) {
-  return function createRender2(selector, compare) {
+function createRenderWithStore(store) {
+  return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
@@ -167,14 +167,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = (0, import_react5.useRef)(null);
     (0, import_react5.useEffect)(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -207,17 +212,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -240,18 +251,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = (0, import_react6.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react7.default.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = (0, import_react6.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react7.default.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react6.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react7.default.createElement(Select, { store, ...props });
+  }, []);
   const textarea = (0, import_react6.useCallback)(function Component(props) {
     return /* @__PURE__ */ import_react7.default.createElement(Textarea, { store, ...props });
   }, []);
@@ -261,15 +266,24 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react7.default.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react7.default.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react7.default.createElement("textarea", { ...props, ...storeProps });
 }
@@ -284,7 +298,7 @@ function useFormStore(initialState) {
     },
     dispatch: store.dispatch,
     subscribe: store.subscribe,
-    render: createRender(store),
+    render: createRenderWithStore(store),
     ...storeInput
   };
 }

package/dist/use_form_store.mjs

@@ -27,8 +27,8 @@ function useSelector(store, selector, compare = (a, b) => a === b) {
 
 // src/create_render.tsx
 import React from "react";
-function createRender(store) {
-  return function createRender2(selector, compare) {
+function createRenderWithStore(store) {
+  return function createRender(selector, compare) {
     function Component() {
       const result = useSelector(store, (state) => state, compare);
       const content = selector(result);
@@ -137,14 +137,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = useRef2(null);
     useEffect2(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -177,17 +182,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -210,18 +221,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React2.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = useCallback(function Component(props) {
+    return /* @__PURE__ */ React2.createElement(Input, { store, ...props });
+  }, []);
+  const select = useCallback(function Component(props) {
+    return /* @__PURE__ */ React2.createElement(Select, { store, ...props });
+  }, []);
   const textarea = useCallback(function Component(props) {
     return /* @__PURE__ */ React2.createElement(Textarea, { store, ...props });
   }, []);
@@ -231,15 +236,24 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React2.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React2.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React2.createElement("textarea", { ...props, ...storeProps });
 }
@@ -254,7 +268,7 @@ function useFormStore(initialState) {
     },
     dispatch: store.dispatch,
     subscribe: store.subscribe,
-    render: createRender(store),
+    render: createRenderWithStore(store),
     ...storeInput
   };
 }

package/dist/use_store_input.d.mts

@@ -1,7 +1,7 @@
-import React__default, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import React__default, { DetailedHTMLProps, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { Store } from './use_store.mjs';
 
-type StoreInputProps<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = Omit<TElement extends HTMLInputElement ? InputHTMLAttributes<HTMLInputElement> : TElement extends HTMLSelectElement ? SelectHTMLAttributes<HTMLSelectElement> : TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> & {
+type StoreInputProps<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = Omit<TElement extends HTMLInputElement ? DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : TElement extends HTMLSelectElement ? DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "name"> & {
     name: keyof TState;
 };
 declare function useStoreInput<TState>(store: Store<TState>): {

package/dist/use_store_input.d.ts

@@ -1,7 +1,7 @@
-import React__default, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import React__default, { DetailedHTMLProps, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import { Store } from './use_store.js';
 
-type StoreInputProps<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = Omit<TElement extends HTMLInputElement ? InputHTMLAttributes<HTMLInputElement> : TElement extends HTMLSelectElement ? SelectHTMLAttributes<HTMLSelectElement> : TextareaHTMLAttributes<HTMLTextAreaElement>, "name"> & {
+type StoreInputProps<TElement extends HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, TState> = Omit<TElement extends HTMLInputElement ? DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> : TElement extends HTMLSelectElement ? DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement> : DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "name"> & {
     name: keyof TState;
 };
 declare function useStoreInput<TState>(store: Store<TState>): {

package/dist/use_store_input.js

@@ -84,14 +84,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -124,17 +129,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -157,18 +168,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = (0, import_react2.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react3.default.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = (0, import_react2.useCallback)(
-    function Component(props) {
-      return /* @__PURE__ */ import_react3.default.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = (0, import_react2.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react3.default.createElement(Input, { store, ...props });
+  }, []);
+  const select = (0, import_react2.useCallback)(function Component(props) {
+    return /* @__PURE__ */ import_react3.default.createElement(Select, { store, ...props });
+  }, []);
   const textarea = (0, import_react2.useCallback)(function Component(props) {
     return /* @__PURE__ */ import_react3.default.createElement(Textarea, { store, ...props });
   }, []);
@@ -178,15 +183,24 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react3.default.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react3.default.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ import_react3.default.createElement("textarea", { ...props, ...storeProps });
 }

package/dist/use_store_input.mjs

@@ -53,14 +53,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = useRef(null);
     useEffect(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -93,17 +98,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };
@@ -126,18 +137,12 @@ function useStoreInputProps(store, props) {
 
 // src/use_store_input.tsx
 function useStoreInput(store) {
-  const input = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React.createElement(Input, { store, ...props });
-    },
-    []
-  );
-  const select = useCallback(
-    function Component(props) {
-      return /* @__PURE__ */ React.createElement(Select, { store, ...props });
-    },
-    []
-  );
+  const input = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Input, { store, ...props });
+  }, []);
+  const select = useCallback(function Component(props) {
+    return /* @__PURE__ */ React.createElement(Select, { store, ...props });
+  }, []);
   const textarea = useCallback(function Component(props) {
     return /* @__PURE__ */ React.createElement(Textarea, { store, ...props });
   }, []);
@@ -147,15 +152,24 @@ function useStoreInput(store) {
     textarea
   };
 }
-function Input({ store, ...props }) {
+function Input({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("input", { ...props, ...storeProps });
 }
-function Select({ store, ...props }) {
+function Select({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("select", { ...props, ...storeProps });
 }
-function Textarea({ store, ...props }) {
+function Textarea({
+  store,
+  ...props
+}) {
   const storeProps = useStoreInputProps(store, props);
   return /* @__PURE__ */ React.createElement("textarea", { ...props, ...storeProps });
 }

package/dist/use_store_input_props.d.mts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
+import { Ref, HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
 import { Store } from './use_store.mjs';
 
 type InputType = HTMLInputTypeAttribute;
 type InputProps<TElement, TState> = {
+    ref?: Ref<TElement>;
     name: keyof TState;
     type?: InputType;
     defaultValue?: string | number | readonly string[];

package/dist/use_store_input_props.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
+import { Ref, HTMLInputTypeAttribute, ChangeEventHandler } from 'react';
 import { Store } from './use_store.js';
 
 type InputType = HTMLInputTypeAttribute;
 type InputProps<TElement, TState> = {
+    ref?: Ref<TElement>;
     name: keyof TState;
     type?: InputType;
     defaultValue?: string | number | readonly string[];

package/dist/use_store_input_props.js

@@ -67,14 +67,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -107,17 +112,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };

package/dist/use_store_input_props.mjs

@@ -47,14 +47,19 @@ function useStoreInputProps(store, props) {
   function useSubscriptionRef() {
     const ref2 = useRef(null);
     useEffect(() => {
+      const input = ref2.current;
+      if (!input) {
+        return;
+      }
+      if (typeof props.ref === "function") {
+        props.ref(input);
+      } else if (props.ref) {
+        props.ref.current = input;
+      }
       return store.subscribe((state, key) => {
         if (key === dispatchKey) {
           return;
         }
-        const input = ref2.current;
-        if (!input) {
-          return;
-        }
         if (props.type === "checkbox" || props.type === "radio") {
           const checked = toInputChecked(state[props.name]);
           if (input.checked === checked) {
@@ -87,17 +92,23 @@ function useStoreInputProps(store, props) {
     return (e) => {
       const target = e.target;
       if (props.type === "checkbox") {
-        store.dispatch((state) => {
-          state[props.name] = target.checked;
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = target.checked;
+          },
+          {
+            key: dispatchKey
+          }
+        );
       } else {
-        store.dispatch((state) => {
-          state[props.name] = toStateValue(target.value);
-        }, {
-          key: dispatchKey
-        });
+        store.dispatch(
+          (state) => {
+            state[props.name] = toStateValue(target.value);
+          },
+          {
+            key: dispatchKey
+          }
+        );
       }
       props.onChange?.(e);
     };

package/package.json

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