solid-hook-form 1.4.1 → 1.5.0

package/README.md

@@ -1,8 +1,17 @@
 # Solid Hook Form
 
-### Playground
+[<img width="1171" alt="Screenshot 2025-04-05 at 15 01 47" src="https://github.com/tatsmaki/solid-hook-form/blob/master/assets/demo.png" />](https://tatsmaki.github.io/solid-hook-form)
 
-[<img width="1171" alt="Screenshot 2025-04-05 at 15 01 47" src="https://github.com/tatsmaki/solid-hook-form/blob/master/assets/demo.png" />](https://solid-hook-form.vercel.app/)
+<p align="center">
+  <a href="https://tatsmaki.github.io/solid-hook-form/#/quickstart">Get started</a> | 
+  <a href="https://solid-hook-form.vercel.app/">Playground</a> 
+</p>
+
+### Features
+
+- Embraces native HTML form [validation](https://tatsmaki.github.io/solid-hook-form/#/quickstart?id=apply-validation)
+- [Small size](https://bundlephobia.com/package/solid-hook-form@latest) and no [dependencies](./package.json)
+- TypeScript [support](https://tatsmaki.github.io/solid-hook-form/#/quickstart?id=typescript)
 
 ### Install
 
@@ -10,42 +19,23 @@
 npm install solid-hook-form
 ```
 
-### Quickstart
+### Quick start
 
-```tsx
+```jsx
 import { useForm } from "solid-hook-form";
 
-const Form = () => {
-  const { errors, isValid, register, onSubmit } = useForm({
+const ExampleForm = () => {
+  const { errors, register, onSubmit } = useForm({
     defaultValues: {
-      date: new Date().toISOString().split("T")[0],
-      email: "",
-      password: "",
-      age: 0,
-      remember: false,
+      name: "",
     },
   });
 
+  const submitExample = (values) => console.log(values);
+
   return (
-    <form onSubmit={onSubmit(handleSubmit)}>
-      <input type="date" {...register("date", { required: "Required" })} />;
-      <input
-        {...register("email", {
-          required: "Required",
-          pattern: {
-            value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-            message: "Invalid email",
-          },
-        })}
-      />
-      <input
-        {...register("password", {
-          required: "Required",
-          minLength: { value: 8, message: "Min 8" },
-        })}
-      />
-      <input type="number" {...register("age", { min: 18, max: 100 })} />
-      <input type="checkbox" {...register("remember", { required: "Required" })} />
+    <form onSubmit={onSubmit(submitExample)}>
+      <input {...register("name", { minLength: 2, pattern: /[A-Za-z]/ })} />;
       <button type="submit">Submit</button>
     </form>
   );

package/dist/logic/create_errors.d.ts

@@ -6,4 +6,5 @@ export declare const createErrors: <F extends FormValues>() => {
     appendError: (name: Path<F>, error: FieldError) => void;
     removeError: (name: Path<F>) => void;
     resetErrors: () => void;
+    getError: (name: string) => any;
 };

package/dist/logic/create_fields.d.ts

@@ -0,0 +1,6 @@
+import { FormFields, Ref } from '../types/form';
+export declare const createFields: () => {
+    fields: FormFields;
+    getField: (name: string) => Ref;
+    setField: (name: string, element: Ref) => void;
+};

package/dist/logic/create_rules.d.ts

@@ -0,0 +1,8 @@
+import { FormValues } from '../types/form';
+import { Path } from '../types/path';
+import { Rules } from '../types/validate';
+export declare const createRules: <F extends FormValues>() => {
+    rules: Record<string, Rules<F, Path<F>>>;
+    addRule: (name: string, options: Rules<F, Path<F>>) => void;
+    getRule: (name: string) => Rules<F, Path<F>>;
+};