# zed-form

> A radically different, yet familiar, approach to forms in React: **just let the browser do it**

Latest version **0.0.0** (published 2023-05-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install zed-form
pnpm add zed-form
yarn add zed-form
bun add zed-form
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2023-05-07 |
| First published | 2023-05-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Zach Olivare |
| Maintainers | olivare |
| Keywords | react, form, validation, build, zod, uncontrolled, fast, scalable, typescript |

## Links

- npm: https://www.npmjs.com/package/zed-form
- Repository: https://github.com/0livare/zed-form
- Homepage: https://github.com/0livare/zed-form#readme
- Issues: https://github.com/0livare/zed-form/issues
- npm.io page: https://npm.io/package/zed-form

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.0 (latest) — 2023-05-07

## README

# Zed Form

A radically different, yet familiar, approach to forms in React: **just let the browser do it**

> _zero re-renders by default_

<!-- A fast, scalable, easy to use, complete form solution for React. -->

## Why?

Perhaps the most frustrating part of React is dealing with forms. The [standard React approach](https://legacy.reactjs.org/docs/forms.html) to forms is both slow and filled with boilerplate. Some libraries deal with the boilerplate by adding complexity and are still slow.

Zed Form takes a radically different, yet familiar, approach to forms: **just let the browser do it**.

The eventing system that is already built into the browser is incredibly fast and efficient for dealing with form inputs. React layering a bunch of unnecessary rendering and re-rendering on top of that flow really slows down pages with many form elements as everything is re-rendered on every user keystroke.

With Zed Form, every `<input>` is an "uncontrolled" input. Instead of forcing the input to have a certain value, and re-rendering the input on every keystroke to force it to have an updated value, Zed Form _just let's the user type_ and keeps track of what they've typed.

On top of that, Zed Form supports all the features you've come to expect form other form libraries:

- Schema error validation
  - Built in support for [zod](https://github.com/colinhacks/zod) (but you can supply an adapter for any schema validation library
- Setting initial values
- "Touched" tracking, so errors by default aren't shown until the user has interacted with a particular input
- Opt-in support for tracking a form value via React state (useful for when you need to hide or show form inputs based on a previous input value)

## Install

```bash
npm i zed-form     # npm
pnpm i zed-form    # pnpm
yarn add zed-form  # yarn
```

## Example

```js
import {Form, useCreateForm} from 'zed-form'

function App() {
  const form = useCreateForm()
  return (
    <Form form={form}>
      <input type="text" {...form.register('foo')} />
      <input type="text" {...form.register('bar')} />
    </Form>
  )
}
```

## Example with Schema Validation

```js
import {Form, useCreateForm, useFormValue} from 'zed-form'
import zod from 'zod'

const schema = zod.object({
  foo: zod.enum(['foo', 'baz']),
})

function App() {
  const form = useCreateForm({
    initialValues: {foo: 'foo'},
    validationSchema: schema,
  })

  return (
    <Form form={form}>
      <TextField type="text" {...form.register('foo')} />
      <TextField type="text" {...form.register('bar')} />
    </Form>
  )
}

function TextField(props: React.ComponentProps<'input'>) {
  const error = useFormValue(`error:${props.name}`)

  return (
    <div>
      <input {...props} className="w-full" />
      {error && <p style={{color: 'red'}}>{error}</p>}
    </div>
  )
}
```

---
_Source: https://npm.io/package/zed-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._