leonardomso / slatt

🐍 Another form library for React? Oh, please!

🐍 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

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 (
    <form onSubmit={handleSubmit} className="App">
      <h1>🐍 Slatt</h1>

      <label>Name</label>
      <input
        type="text"
        name="name"
        onChange={handleChange}
        value={values.name}
      />
      {errors.email ? <h1>{errors.email}</h1> : null}

      <label>Password</label>
      <input
        type="text"
        name="password"
        onChange={handleChange}
        value={values.password}
      />
      {errors.password ? <h1>{errors.password}</h1> : null}

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

export default App;