React-Hook-Form

<p><span style="color: rgb(255, 255, 255);">React-hook-form öğrenirken yaşadığım deneyimleri ve kazanımlarımı bu formda paylaşacağım.</span></p><p><br></p><ul><li><span style="color: rgb(255, 255, 255);">Email kurallarını backende gitmeden ,kullanıcı girişlerini control etmemizde kolaylık sağlıyor.</span></li></ul><pre class="ql-syntax" spellcheck="false">
&nbsp; const form = useForm&lt;FormValues&gt;();
&nbsp; const { register, control, handleSubmit, formState } = form;
&nbsp; const { errors } = formState;&nbsp; &nbsp;
 &nbsp; &nbsp; &lt;input
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="username"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...register("username", {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; required: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: true,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: "username required",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}
&nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;{errors.username?.message}&lt;/p&gt;

</pre><p>	</p><ul><li>Input elemanlarının içini doldururken re-render olmasını engelliyor .</li><li>Custom validate(doğrulama) kuralları yazabiliyoruz.</li></ul><pre class="ql-syntax" spellcheck="false">&nbsp; &nbsp; &nbsp;&lt;div className="form-control"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;label htmlFor="email"&gt;Email&lt;/label&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;input
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="email"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="email"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {...register("email", {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pattern: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; message: "Invalid email format",
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; validate: {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; notBlacklist: (fieldvalue) =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; !fieldvalue.endsWith("baddomain.com") ||
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "This domain is nor supported"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;{errors.email?.message}&lt;/p&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;


</pre><p>		<span style="color: rgb(255, 255, 255);">bu örnekte validate:{} prop içine inpute girilen değerin kendi belirlediğimiz validate kuralına göre girilmesini sağlıyoruz. burada istediğimiz kuralı yazabiliriz.mesela kullanıcının admin olup olmadığını kontrol edebiliriz.</span></p><ul><li>en çok kullanılan form kütüphanesi</li></ul>