https://github.com/leonardomso/slatt

🐍 Another form library for React? Oh, please!
https://github.com/leonardomso/slatt

form form-library formik forms hooks react reactjs

Last synced: 19 days ago
JSON representation

🐍 Another form library for React? Oh, please!

• Host: GitHub
• URL: https://github.com/leonardomso/slatt
• Owner: leonardomso
• License: mit
• Created: 2019-06-21T21:03:13.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-27T06:31:53.000Z (about 1 year ago)
• Last Synced: 2024-10-14T09:19:36.017Z (about 1 month ago)
• Topics: form, form-library, formik, forms, hooks, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 658 KB
• Stars: 10
• Watchers: 2
• Forks: 2
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




🐍 Slatt





  Another form library to use with React? Oh, please!













## Another form library? Oh, please!

I'm just trying to understand how to use custom hooks to deal with forms in React, I was boring so I thought "why not create another form library?". Feel free to contribute.

## Getting Started

To get it started, add `slatt` to your project:

```

npm install --save slatt

```

This library requires `react@^16.8.0` as a peer dependency.

## Usage

```jsx

import React from 'react';

import useSlatt from 'slatt';

const initialValues = {

  name: '',

  lastName: '',

  age: 0,

};

const App = () => {

  const validationSchema = Yup.object().shape({

    email: Yup.string()

      .email('Email is invalid')

      .required('Email is required'),

    password: Yup.string()

      .required('Password is required')

      .min(8, 'Password min length is 8'),

  });

  const {

    values,

    errors,

    touched,

    handleChange,

    handleBlur,

    handleSubmit,

  } = useSlatt({

    initialValues,

    onSubmit: values => console.log({ values }),

    validationSchema,

  });

  return (

    

      
🐍 Slatt


      Name

      

      {errors.email ? 
{errors.email}
 : null}


      Password

      

      {errors.password ? 
{errors.password}
 : null}


      Submit

    

  );

};

export default App;

```