Alternative to React Hook Form

import React from 'react';
import { useForm } from 'react-hook-form';
export const NewsletterForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm();
const validEmailRegex = new RegExp(/^[A-Z0–9._%+-]+@[A-Z0–9.-]+\.[A-Z]+$/, 'i');
const onSubmit = formData => console.log(formData);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="name">Name</label>
<input id="name" {…register("name", { required: true })} />
{errors.name?.type === 'required' && <span>Required</span>}
<label htmlFor="email">Email</label>
<input
id="email"
{…register("email", {
required: true,
validate: value => validEmailRegex.test(value)
})}
/>
{errors.email?.type === 'required' && <span>Required</span>}
{errors.email?.type === 'validate' && (
<span>Enter a valid email</span>
)}
<button type="submit">Submit</button>
</form>
);
};
import React, { useState } from 'react';
import { Form, Field, Input, Button } from '@glorious/taslonic/react';
export const NewsletterForm = () => {
const [data, setData] = useState({});
const validEmailRegex = new RegExp(/^[A-Z0–9._%+-]+@[A-Z0–9.-]+\.[A-Z]+$/, 'i');
const emailValidations = [{
isValid: value => validEmailRegex.test(value),
errorMessage: 'Enter a valid email'
}];
const handleFieldChange = ({ target: { name, value } }) => {
setData(prevData => ({ …prevData, [name]: value }));
}
const onSubmit = () => console.log(data);
return (
<Form onSubmit={onSubmit}>
<Field label=”Name”>
<Input
name="name"
value={data.name}
onChange={handleFieldChange}
required
/>
</Field>
<Field label=”Email”>
<Input
name="email"
value={data.email}
validations={emailValidations}
onChange={handleFieldChange}
required
/>
</Field>
<Button type=”submit”>Submit</Button>
</Form>
);
};

--

--

--

Creator of typenik.com, pitsby.com, taslonic.com and glorious.codes. More at rafaelcamargo.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Deep React JS

How to use confirm dialogs in a Laravel Nova Tool

Why did we move Gatsby into nextjs?

Design Patterns in JavaScript: Creational

How JavaScript is used for the back-end ft. Node.js?

Prototype Quickly with Bootstrap for React

The dev.to project with GatsbyJS-11

Inversion Of Control In Spring :

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rafael Camargo

Rafael Camargo

Creator of typenik.com, pitsby.com, taslonic.com and glorious.codes. More at rafaelcamargo.com

More from Medium

What is React Fiber and How It Helps You Build a High-Performing React Applications

Mariam — Front-End React Developer

Every React Developer Should Know This

Mantine a clean React UI library