# react-styleless-form

> Small, type-friendly and flexible react form component.

Latest version **1.0.10** (published 2023-12-26) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-styleless-form
pnpm add react-styleless-form
yarn add react-styleless-form
bun add react-styleless-form
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2023-12-26 |
| First published | 2023-08-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 52.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Eugene Trofimov |
| Maintainers | deadrime |
| Keywords | form, typescript, validation, react, antd, ant, styleless, replacement |

## Links

- npm: https://www.npmjs.com/package/react-styleless-form
- Repository: https://github.com/deadrime/react-styleless-form
- Homepage: https://github.com/deadrime/react-styleless-form#readme
- Issues: https://github.com/deadrime/react-styleless-form/issues
- npm.io page: https://npm.io/package/react-styleless-form

## Dependencies (4)

- [react-use](https://npm.io/package/react-use.md) ^17.4.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [@types/cross-spawn](https://npm.io/package/@types/cross-spawn.md) ^6.0.6
- [@storybook/builder-vite](https://npm.io/package/@storybook/builder-vite.md) ^7.6.6

## 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

- 1.0.10 (latest) — 2023-12-26
- 1.0.8 — 2023-08-26
- 1.0.7 — 2023-08-26
- 1.0.6 — 2023-08-25
- 1.0.5 — 2023-08-25
- 1.0.4 — 2023-08-25
- 1.0.3 — 2023-08-25
- 1.0.2 — 2023-08-25
- 1.0.1 — 2023-08-25
- 1.0.0 — 2023-08-25

## README

# React styleless form

This package was inspired by `antd` form component. But this one without any antd dependencies, smaller, type-friendly and way more flexible. Feel free to just replace antd form with this one.

Package size in 7.71 kB │ gzip: 2.84 kB │ map: 33.43 kB

Examples - https://react-styleless-form.vercel.app/

## Get started

Install this package

```bash
npm i react-styleless-form
```

Use it like this:

```tsx
import { Form, FormItem } from "react-styleless-form";

const HelloWorldForm = () => {
  return (
    <Form
      onFinish={(fields) => {
        alert(JSON.stringify(fields, undefined, 2));
      }}
      id="myForm"
    >
      <FormItem
        name="name"
        label="Name"
        rules={[
          {
            required: true,
            message: "Name is required",
          },
        ]}
      >
        <TextInput />
      </FormItem>
      <FormItem name="city" label="City">
        <TextInput />
      </FormItem>
      <FormItem
        name="age"
        label="Age"
        rules={[
          {
            required: true,
            message: "Age is required",
          },
          {
            min: 18,
            type: "number",
            message: "you are too young :(",
          },
          {
            max: 100,
            type: "number",
            message: "you are too old :(",
          },
        ]}
      >
        <NumberInput />
      </FormItem>
      <button type="submit">Submit button</button>
    </Form>
  );
};
```

For more type support use `createTypedForm` method instead:

```tsx
import { createTypedForm } from 'react-styleless-form';

type FormState {
  field1: string
  field2: number
}

const { Form, FormItem } =  createTypedForm<FormState>();

```

### Styling

No CSS by default. You need to style form by you own.
You can change classes prefix (`.form` by default) using `CSSPrefix` property.
You can use `renderLabel` to customize <label> and `renderError` for customize form error message.

CSS classes:

`.form` - <form> tag.

`.form__form-item` - form item wrapper

`.form__form-item__label` - form item label (<label> tag)

`.form__form-item__error` - form item error

Look at `./storybook/styles.css` as example.

### Validation

You can pass array of validation rules to `FormItem`.
Don't forget to set error message.
You can control validation trigger using `validationTrigger`:
`["onChange"]` - trigger fires if value changed (debounced by `300ms`)
`["onFinish"]` - trigger fires only after form submit

```ts
[
  {
    // throw an error if field value is undefined
    required: true,
    message: "Age is required",
  },
  {
    // if value < 18
    min: 18,
    type: "number",
    message: "some message",
  },
  {
    // if String().length > 100
    max: 100,
    type: "string",
    message: "some error",
  },
  {
    // if myPattern.test() === false
    type: "regexp",
    pattern: myPattern,
  },
  {
    // If value is not an email address
    type: "email",
  },
  {
    // if myValidator function throw an error or return Promise.reject
    validator: myValidator,
    message: "some error",
  },
];
```

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