react-store-input 0.1.3 → 0.1.4

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

@@ -153,7 +153,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -240,7 +239,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -295,23 +293,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

@@ -105,7 +105,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -192,7 +191,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -249,23 +247,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

@@ -162,7 +162,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -247,7 +246,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -300,23 +298,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

@@ -128,7 +128,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -213,7 +212,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -266,23 +264,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

@@ -92,7 +92,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -177,7 +176,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -230,23 +228,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

@@ -57,7 +57,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -142,7 +141,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {
@@ -195,23 +193,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

@@ -71,7 +71,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };

package/dist/use_store_controller.mjs

@@ -47,7 +47,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

@@ -75,7 +75,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -160,7 +159,6 @@ function useStoreInput(store, props) {
   });
   return {
     ref: inputProps.ref,
-    dispatchKey: inputProps.dispatchKey,
     defaultValue: getDefaultValue(),
     defaultChecked: getDefaultChecked(),
     onChange: (event) => {

package/dist/use_store_input.mjs

@@ -51,7 +51,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -136,7 +135,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

@@ -77,7 +77,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -162,7 +161,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

@@ -51,7 +51,6 @@ function useStoreController(store, props) {
     );
   };
   return {
-    dispatchKey,
     ref,
     onChange
   };
@@ -136,7 +135,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.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",