@ravshansbox/react-form - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/useForm.d.ts

@@ -1,22 +0,24 @@
-import { ChangeEventHandler, Dispatch, FormHTMLAttributes, ReactElement, SetStateAction } from 'react';
-export type FormContext<T> = {
-    values: T;
-    setValues: Dispatch<SetStateAction<T>>;
-};
-export type InputProps<K, V> = {
+import { ChangeEventHandler, FocusEventHandler, FormHTMLAttributes, ReactElement } from 'react';
+type Errors<T> = Partial<Record<keyof T, string>>;
+type InputProps<K, V> = {
     name: K;
+    touched: boolean;
+    error: string;
     value: V;
+    onBlur: FocusEventHandler<HTMLInputElement>;
     onChange: ChangeEventHandler<HTMLInputElement>;
 };
-export type FieldProps<T> = {
+type FieldProps<T> = {
     children: (props: InputProps<keyof T, T[keyof T]>) => ReactElement;
     name: keyof T;
 };
-export type UseFormOptions<T> = {
+type UseFormOptions<T> = {
+    handleSubmit: (values: T) => void;
     initialValues: T;
-    handleSubmit: (values: T) => void;
+    validate: (values: T) => Errors<T>;
 };
-export declare function useForm<T extends Record<string, string>>({ initialValues, handleSubmit, }: UseFormOptions<T>): {
+export declare function useForm<T extends Record<string, string>>({ handleSubmit, initialValues, validate, }: UseFormOptions<T>): {
     Form: ({ children, ...props }: FormHTMLAttributes<HTMLFormElement>) => import("react/jsx-runtime").JSX.Element;
     Field: ({ children, name }: FieldProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 };
+export {};

dist/useForm.js

@@ -14,6 +14,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { createContext, useContext, useState, } from 'react';
-export function useForm({ initialValues, handleSubmit, }) {
-    const formContext = createContext({});
+export function useForm({ handleSubmit, initialValues, validate, }) {
+    const FormContext = createContext({});
     function Form(_a) {
         var { children } = _a, props = __rest(_a, ["children"]);
+        const [toucheds, setToucheds] = useState({});
+        const [errors, setErrors] = useState({});
         const [values, setValues] = useState(initialValues);
@@ -24,13 +26,21 @@ const onSubmit = (event) => {
         };
-        return (_jsx(formContext.Provider, Object.assign({ value: { values, setValues } }, { children: _jsx("form", Object.assign({ onSubmit: onSubmit }, props, { children: children })) })));
+        return (_jsx(FormContext.Provider, Object.assign({ value: { toucheds, errors, values, setToucheds, setErrors, setValues } }, { children: _jsx("form", Object.assign({ onSubmit: onSubmit }, props, { children: children })) })));
     }
     function Field({ children, name }) {
-        const { values, setValues } = useContext(formContext);
+        var _a, _b;
+        const { toucheds, errors, values, setToucheds, setErrors, setValues } = useContext(FormContext);
+        const touched = (_a = toucheds[name]) !== null && _a !== void 0 ? _a : false;
+        const error = (_b = errors[name]) !== null && _b !== void 0 ? _b : '';
         const value = values[name];
+        const onBlur = () => {
+            setToucheds((values) => (Object.assign(Object.assign({}, values), { [name]: true })));
+            setErrors(validate(values));
+        };
         const onChange = (event) => {
-            setValues((values) => (Object.assign(Object.assign({}, values), { [name]: event.target.value })));
+            const { checked, type, value } = event.target;
+            setValues((values) => (Object.assign(Object.assign({}, values), { [name]: type === 'checkbox' ? checked : value })));
         };
-        return children({ name, value, onChange });
+        return children({ name, touched, error, value, onBlur, onChange });
     }
     return { Form, Field };
 }

package.json

 {
   "name": "@ravshansbox/react-form",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
@@ -5,0 +5,0 @@ "main": "dist",

No alert changes

Improved metrics

Total package byte prevSize

3689

increased by25.43%

Lines of code

70

increased by20.69%

No dependency changes