@use-form/use-form

Welcome to useForm 👋

useForm provides a way to create complex forms easily.

🏠 Homepage

✨ Demo

UseForm

Create hooks to manage your forms.

UseForm is an open source project that allows you to create forms easily, different from the others options, this package guides you to create custom hooks to manage your forms, you can use the same form in different components without context API.

• As other packages, you can also use yup validation to validate your form.
• You can also use different approaches to handle your form, like onSubmit | onChange | debounce.
• Less code than other options.

Motivation

Today we have a lot of form packages, and this project doesn't pretend to be the number one, this is just a new way to create hooks to manage your forms. But if you guys like this project, we can publish it, and maintain it.

Instalation

NPM

npm i @use-form/use-form

YARN

yarn add @use-form/use-form

First step

The first step is to create your form with the createForm function, this function returns a hook that you can use to manage your form, wherever you want to use.

import { createForm } from '@use-form/use-form';

export const useLoginForm = createForm({
  initialValues: {
    email: '[e-mail]',
    password: 'yourpassword',
  },
});

Second step

The second step is to create a component to render your form, you can use the useLoginForm hook to get the form state and manage it.

import { useLoginForm } from './useLoginForm.js';

const LoginForm = () => {
  const { handleSubmit, register } = useLoginForm();

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="email" {...register('email')} />
      <input type="password" {...register('password')} />
      <button type="submit">Submit</button>
    </form>
  );
};

It's All.

Read the full documentation here.

Post

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2022 jucian0.
This project is MIT licensed.