Skip to content

Commit

Permalink
improve readme
Browse files Browse the repository at this point in the history
  • Loading branch information
kumarasinghe committed May 29, 2023
1 parent f537c71 commit 38328f5
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 7 deletions.
15 changes: 9 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,21 @@

#### 🚀 Designed with simplicity and performance in mind

### Install
## Installation

```sh
npm install formite
```

### Usage
## Login form example

```tsx
// LoginForm.tsx

import { component$, useStore} from "@builder.io/qwik";
import Form, { ValidationStore } from "formite";

export const LoginForm = component$(() => {

// a store with inputs to validate with their validators
// a store defining the inputs we need to validate along with their validators
const validationStore: ValidationStore = useStore({
email: {
validator: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/, // or z.string().email()
Expand All @@ -39,7 +37,10 @@ export const LoginForm = component$(() => {
});

return (
<Form validationStore={validationStore} onSubmit$={console.log}>
<Form
validationStore={validationStore}
onSubmit$={(formData)=>{/* send form data to server */}}>

{/* email */}
<div>
Email: <input name="email" />
Expand All @@ -64,3 +65,5 @@ export const LoginForm = component$(() => {
);
});
```

### Have an issue? [Post it here](https://github.com/kumarasinghe/formite/issues)
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "formite",
"version": "1.0.1",
"version": "1.0.2",
"description": "A minimal and lightweight form library for Qwik",
"keywords": ["qwik", "form", "validation", "signup", "login", "lightweight", "minimal", "formite", "hook forms", "formik"],
"author": "Naveen Kumarasinghe <[email protected]>",
Expand Down

0 comments on commit 38328f5

Please sign in to comment.