https://github.com/hannoeru/formik-effect-schema

effect schema utils for Formik
https://github.com/hannoeru/formik-effect-schema

Last synced: 11 days ago
JSON representation

effect schema utils for Formik

• Host: GitHub
• URL: https://github.com/hannoeru/formik-effect-schema
• Owner: hannoeru
• License: mit
• Created: 2024-07-01T10:04:45.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-10-23T05:09:31.000Z (16 days ago)
• Last Synced: 2024-10-24T00:47:41.475Z (15 days ago)
• Language: TypeScript
• Size: 347 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# formik-effect-schema

[![NPM version](https://img.shields.io/npm/v/formik-effect-schema?color=a1b858&label=)](https://www.npmjs.com/package/formik-effect-schema)

This library adapts a [@effect/schema](https://github.com/Effect-TS/effect/tree/main/packages/schema) schema to work as a `validationSchema` prop or `validate` prop on [Formik](https://formik.org/)

## Install

```sh

# npm

$ npm install formik-effect-schema

# yarn

$ yarn add formik-effect-schema

# pnpm

$ pnpm add formik-effect-schema

```

## Usage

```TSX

import { Schema as S } from '@effect/schema'

import { Formik } from 'formik';

import { toValidationSchema } from 'formik-effect-schema';

const formSchema = S.Struct({

  name: S.String,

  age: S.Number,

})

type Values = S.Schema.Type

const Component = () => (

  

    validationSchema={toValidationSchema(formSchema)}

  >

    {/** ... */}

  

);

```

```TSX

import { Schema as S } from '@effect/schema'

import { Formik } from 'formik';

import { toValidate } from 'formik-effect-schema';

const formSchema = S.Struct({

  name: S.String,

  age: S.Number,

})

type Values = S.Schema.Type

const Component = () => (

  

    validate={toValidate(formSchema)}

  >

    {/** ... */}

  

);

```

## License

[MIT](./LICENSE) License © 2024 [hannoeru](https://github.com/hannoeru)