๐Ÿ“ฆ leonardomso / slatt

๐Ÿ Another form library for React? Oh, please!

โ˜… 10 stars โ‘‚ 4 forks ๐Ÿ‘ 10 watching โš–๏ธ MIT License
formform-libraryformikformshooksreactreactjs
๐Ÿ“ฅ Clone https://github.com/leonardomso/slatt.git
HTTPS git clone https://github.com/leonardomso/slatt.git
SSH git clone git@github.com:leonardomso/slatt.git
CLI gh repo clone leonardomso/slatt
Leonardo Maldonado Leonardo Maldonado Merge pull request #31 from leonardomso/dependabot/npm_and_yarn/example/word-wrap-1.2.5 c93727f 2 years ago ๐Ÿ“ History
๐Ÿ“‚ master View all commits โ†’
๐Ÿ“ example
๐Ÿ“ src
๐Ÿ“ test
๐Ÿ“„ .gitignore
๐Ÿ“„ LICENSE
๐Ÿ“„ package.json
๐Ÿ“„ README.md
๐Ÿ“„ tsconfig.json
๐Ÿ“„ yarn.lock
๐Ÿ“„ README.md

๐Ÿ Slatt

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

Build Status


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;