https://github.com/lukasalvarezdev/remix-form-library

An easy way to validate your remix forms client and server side
https://github.com/lukasalvarezdev/remix-form-library

react remix-run typescript

Last synced: 10 days ago
JSON representation

An easy way to validate your remix forms client and server side

• Host: GitHub
• URL: https://github.com/lukasalvarezdev/remix-form-library
• Owner: lukasalvarezdev
• License: mit
• Created: 2022-10-16T18:33:37.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-21T03:31:15.000Z (over 2 years ago)
• Last Synced: 2024-12-14T20:13:57.098Z (about 1 month ago)
• Topics: react, remix-run, typescript
• Language: TypeScript
• Homepage:
• Size: 973 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Remix Form Library

A minimalist library to validate your remix forms end to end, from server to client.

## Installation

```

  npm install remix-form-library

```

## API reference

### useInput

The `useInput` function provides you the ability to perform atomic client side validations with [zod](https://www.npmjs.com/package/zod). The validate function will be triggered with the `onChange` event.

```typescript

function AgeInput() {

  const { getErrorElementProps, error, getInputProps } = useInput(

    z.number().min(18, 'You must be 18 years old'),

  );

  return (

   <>

      

        Age

        

      

      {error && 
{error}
}

   >

  );

 }

```


### useServerInput

The `useServerInput` function provides you the same capabilities as `useInput`. It will also listen to the data that you return in your [action function](https://remix.run/docs/en/v1/api/conventions#action) through the `useActionData` hook from the package `@remix-run/react`, or if you are using a fetcher, you must provide the fetcher as the third argument. It will give more priority to the client side validation than to the server error, so if you have an error in both client and server side, it will show the client error first.

For it to work, you need to return the errors from the action function in a `fieldErrors` object, with the key that has the error and the error.

```typescript

// app/routes/index.tsx

export async function action({ request }: ActionArgs) {

  const form = await request.formData();

  const name = form.get('name');

  if (!name) {

    return json({ 

      // fieldErrors object convention

      fieldErrors: {

        name: 'Name is required'  // name of the failing input and the error

      } 

    }, 400);

  }

  return json({ ok: true });

}

function NameInput() {

  const fetcher = useFetcher()

  const { error, getServerInputProps, getServerErrorElementProps } = useServerInput(

    'name',

    z.string().min(3, 'Name must be at least 3 characters'),

    fetcher // fetcher is optional

  );

  return (

   

      

        Name

        

      

      {error && 
{error}
}

   

  );

 }

```


## Author

- [Lukas Álvarez](https://github.com/lukasalvarezdev)

## License

- MIT License