# effector-form-solid

> Effector Form by 42-px for Solidjs

Latest version **1.0.8** (published 2023-12-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install effector-form-solid
pnpm add effector-form-solid
yarn add effector-form-solid
bun add effector-form-solid
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-12-25 |
| First published | 2023-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 31 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Егор Прохоров |
| Maintainers | e_fellow |
| Keywords | solidjs, effector, form, effector-form, effector-form-solid, typescript |

## Links

- npm: https://www.npmjs.com/package/effector-form-solid
- Repository: https://github.com/biscet/effector-form-solid
- Homepage: https://github.com/biscet/effector-form-solid#readme
- Issues: https://github.com/biscet/effector-form-solid/issues
- npm.io page: https://npm.io/package/effector-form-solid

## Dependencies (3)

- [effector](https://npm.io/package/effector.md) 23.0.0
- [solid-js](https://npm.io/package/solid-js.md) 1.8.7
- [effector-solid](https://npm.io/package/effector-solid.md) 0.22.7

## 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.8 (latest) — 2023-12-25
- 1.0.7 — 2023-12-25
- 1.0.6 — 2023-12-25
- 1.0.5 — 2023-12-24
- 1.0.4 — 2023-12-24
- 1.0.3 — 2023-12-24
- 1.0.2 — 2023-12-23
- 1.0.1 — 2023-12-23
- 1.0.0 — 2023-12-23

## README

# Адаптированная библиотека effector-forms от 42-px для использования совместно с SolidJS.

## Установка

`yarn add effector-form-solid` or `npm install effector-form-solid`

- [Документация](https://biscet.github.io/effector-form-solid-docs/)
- [Подробное описание можно найти в оригинальном репозитории 42-px](https://github.com/42-px/effector-forms)

## Hook useForm для SolidJS

```js
import { useForm, createForm } from "effector-form-solid";

const loginForm = createForm({
  fields: {
    email: {
      init: "",
      rules: [
        {
          name: "email",
          validator: (value) => ({
            isValid: /\S+@\S+\.\S+/.test(value),
            errorText: "Incorrect email",
          }),
        },
      ],
      validateOn: ["blur"],
    },
    password: {
      init: "",
      rules: [
        {
          name: "required",
          validator: (value) => ({
            isValid: value.length > 0,
            errorText: "This field is required",
          }),
        },
      ],
      validateOn: ["blur"],
    },
  },
  validateOn: ["submit"],
});

export const Login = () => {
  const { submit, fields } = useForm(loginForm);

  return (
    <form onSubmit={submit}>
      <input
        type="text"
        name="email"
        value={fields.email.value()}
        onInput={(e) => fields.email.onChange(e.target.value)}
        onBlur={fields.email.onBlur}
      />
      <p>{fields.email.errorText()}</p>

      <input
        type="password"
        name="password"
        value={fields.password.value()}
        onInput={(e) => fields.password.onChange(e.target.value)}
        onBlur={fields.password.onBlur}
      />
      <p>{fields.password.errorText()}</p>

      <button type="submit">Submit</button>
    </form>
  );
};
```

## Hook useFormSignals для SolidJS

```js
import { useFormSignals, createForm } from "effector-form-solid";

const fullNameForm = createForm({
  fields: {
    firstName: {
      init: "",
    },
    secondName: {
      init: "",
    },
    lastName: {
      init: "",
    },
    age: {
      init: "",
    },
  },
  validateOn: ["submit"],
});

export const Login = () => {
  const fields = useFormSignals(fullNameForm);

  console.log("useFormSignals", fields);

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        fullNameForm.submit();
      }}
    >
      <input
        type="text"
        name="firstName"
        value={fields.firstName.value()}
        onInput={(e) => fields.firstName.onChange(e.target.value)}
        onBlur={fields.firstName.onBlur}
      />

      <br />

      <input
        type="text"
        name="secondName"
        value={fields.secondName.value()}
        onInput={(e) => fields.secondName.onChange(e.target.value)}
        onBlur={fields.secondName.onBlur}
      />

      <br />

      <button type="submit">Submit</button>
    </form>
  );
};
```

## Получение определенных сигналов в хуках

```js
const fullNameForm = createForm({
  fields: {
    firstName: {
      init: "",
    },
    secondName: {
      init: "",
    },
    lastName: {
      init: "",
    },
    age: {
      init: "",
    },
  },
  validateOn: ["submit"],
});

const fields = useFormSignals(fullNameForm, ["firstName", "secondName"]);
const { fields } = useForm(fullNameForm, ["firstName", "secondName"]);

// fields => { firstName: {...}, secondName: {...} }
```

## Hook useFormField для SolidJS

```js
import { useFormField, createForm } from "effector-form-solid";

const nameForm = createForm({
  fields: {
    firstName: {
      init: "",
    },
    secondName: {
      init: "",
    },
  },
  validateOn: ["submit"],
});

export const Login = () => {
  const { onChangeField: onChangeFirstName, value: firstNameValue } =
    useFormField(nameForm, "firstName");

  const { onChangeField: onChangeSecondName, value: secondNameValue } =
    useFormField(nameForm, "secondName");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        nameForm.submit();
      }}
    >
      <input
        type="text"
        name="firstName"
        value={firstNameValue()}
        onInput={onChangeFirstName}
      />

      <br />

      <input
        type="text"
        name="secondName"
        value={secondNameValue()}
        onInput={onChangeSecondName}
      />

      <br />

      <button type="submit">Submit</button>
    </form>
  );
};
```

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