mirror of
https://github.com/chenasraf/formplex-react.git
synced 2026-05-18 01:49:08 +00:00
130 lines
32 KiB
HTML
130 lines
32 KiB
HTML
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>formplex-react</title><meta name="description" content="Documentation for formplex-react"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
|
|
<div class="tsd-toolbar-contents container">
|
|
<div class="table-cell" id="tsd-search" data-base=".">
|
|
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
|
|
<div class="field">
|
|
<div id="tsd-toolbar-links"></div></div>
|
|
<ul class="results">
|
|
<li class="state loading">Preparing search index...</li>
|
|
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">formplex-react</a></div>
|
|
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
|
|
<div class="container container-main">
|
|
<div class="col-8 col-content">
|
|
<div class="tsd-page-title">
|
|
<h2>formplex-react</h2></div>
|
|
<div class="tsd-panel tsd-typography">
|
|
<a href="#formplex---react" id="formplex---react" style="color: inherit; text-decoration: none;">
|
|
<h1>FormPlex - React</h1>
|
|
</a>
|
|
<h2 align="center">
|
|
|
|
<p><a href="https://github.com/chenasraf/formplex-react">GitHub</a> |
|
|
<a href="https://casraf.dev/formplex-react">Documentation</a> | <a href="https://npmjs.com/package/formplex-react">NPM</a>
|
|
| <a href="https://casraf.dev">casraf.dev</a></p>
|
|
</h2>
|
|
|
|
<p>Handle forms in your React apps with incredible ease.</p>
|
|
<p>FormPlex lets you use React forms without the hassle; including easy validations, predictable and
|
|
simple usage & API, and great flexibility.</p>
|
|
|
|
<a href="#quick-start" id="quick-start" style="color: inherit; text-decoration: none;">
|
|
<h2>Quick-start</h2>
|
|
</a>
|
|
<p>See the <a href="https://chenasraf.github.io/formplex-react/">full documentation</a> for all the available
|
|
options, return values and more examples.</p>
|
|
|
|
<a href="#use-the-hook" id="use-the-hook" style="color: inherit; text-decoration: none;">
|
|
<h3>Use the hook</h3>
|
|
</a>
|
|
<p>Start by calling the hook, passing in any options you would like for the form, and get the return
|
|
values as needed.</p>
|
|
<p>This is a full example of a hook usage with all the available options and return values. All options
|
|
are optional, see the docs for each for more information.</p>
|
|
<pre><code class="language-tsx"><span class="hl-0">const</span><span class="hl-1"> { </span><span class="hl-2">field</span><span class="hl-1">, </span><span class="hl-2">handleSubmit</span><span class="hl-1">, </span><span class="hl-2">isValid</span><span class="hl-1">, </span><span class="hl-2">errors</span><span class="hl-1">, </span><span class="hl-2">state</span><span class="hl-1">, </span><span class="hl-2">rawState</span><span class="hl-1">, </span><span class="hl-2">setValue</span><span class="hl-1">, </span><span class="hl-2">setValues</span><span class="hl-1"> } =</span><br/><span class="hl-1"> </span><span class="hl-3">useForm</span><span class="hl-1"><</span><span class="hl-4">MyFormData</span><span class="hl-1">>({</span><br/><span class="hl-1"> </span><span class="hl-5">initialState:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">firstName:</span><span class="hl-1"> </span><span class="hl-6">'John'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">lastName:</span><span class="hl-1"> </span><span class="hl-6">'Doe'</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-5">autoValidateBehavior:</span><span class="hl-1"> </span><span class="hl-6">'onChange'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">errorMessages:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">required:</span><span class="hl-1"> </span><span class="hl-6">'This field is required'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">minLength</span><span class="hl-5">:</span><span class="hl-1"> (</span><span class="hl-5">n</span><span class="hl-1">) </span><span class="hl-0">=></span><span class="hl-1"> </span><span class="hl-6">`Must be more than </span><span class="hl-0">${</span><span class="hl-5">n</span><span class="hl-0">}</span><span class="hl-6"> chars long`</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-3">maxLength</span><span class="hl-5">:</span><span class="hl-1"> (</span><span class="hl-5">n</span><span class="hl-1">) </span><span class="hl-0">=></span><span class="hl-1"> </span><span class="hl-6">`Must be less than </span><span class="hl-0">${</span><span class="hl-5">n</span><span class="hl-0">}</span><span class="hl-6"> chars long`</span><span class="hl-1">,</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-3">onSubmit</span><span class="hl-1">(</span><span class="hl-5">values</span><span class="hl-1">, </span><span class="hl-5">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-6">'Form submitted:'</span><span class="hl-1">, </span><span class="hl-5">values</span><span class="hl-1">)</span><br/><span class="hl-1"> </span><span class="hl-3">fetch</span><span class="hl-1">(</span><span class="hl-6">'/submit'</span><span class="hl-1">, { </span><span class="hl-5">method:</span><span class="hl-1"> </span><span class="hl-6">'POST'</span><span class="hl-1">, </span><span class="hl-5">body:</span><span class="hl-1"> </span><span class="hl-2">JSON</span><span class="hl-1">.</span><span class="hl-3">stringify</span><span class="hl-1">(</span><span class="hl-5">values</span><span class="hl-1">) })</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> })</span>
|
|
</code></pre>
|
|
|
|
<a href="#register-an-input" id="register-an-input" style="color: inherit; text-decoration: none;">
|
|
<h3>Register an input</h3>
|
|
</a>
|
|
<p>Use <code>field()</code> from the previous hook on your inputs, should support most input types:</p>
|
|
<pre><code class="language-tsx"><span class="hl-7">// you can import some built-in validators, or create your own</span><br/><span class="hl-8">import</span><span class="hl-1"> { </span><span class="hl-5">validator</span><span class="hl-1"> } </span><span class="hl-8">from</span><span class="hl-1"> </span><span class="hl-6">'formplex-react'</span><br/><br/><span class="hl-9"><</span><span class="hl-10">input</span><span class="hl-1"> </span><span class="hl-11">type</span><span class="hl-1">=</span><span class="hl-6">"text"</span><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'firstName'</span><span class="hl-12">, { </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12">, </span><span class="hl-5">minLength:</span><span class="hl-12"> </span><span class="hl-13">2</span><span class="hl-12"> })</span><span class="hl-0">}</span><span class="hl-1"> </span><span class="hl-9">/></span><br/><span class="hl-9"><</span><span class="hl-10">input</span><span class="hl-1"> </span><span class="hl-11">type</span><span class="hl-1">=</span><span class="hl-6">"number"</span><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'age'</span><span class="hl-12">, {</span><br/><span class="hl-12"> </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-5">validate:</span><span class="hl-12"> </span><span class="hl-5">validator</span><span class="hl-12">.</span><span class="hl-3">min</span><span class="hl-12">(</span><span class="hl-13">18</span><span class="hl-12">, </span><span class="hl-6">'Must be 18 or over'</span><span class="hl-12">),</span><br/><span class="hl-12"> </span><span class="hl-7">// You can implement the above validator yourself like this:</span><br/><span class="hl-12"> </span><span class="hl-7">// validate: (n) => n < 18 ? "Must be 18 or over" : null,</span><br/><span class="hl-12"> </span><span class="hl-5">parse:</span><span class="hl-12"> </span><span class="hl-5">Number</span><span class="hl-12">,</span><br/><span class="hl-12">})</span><span class="hl-0">}</span><span class="hl-1"> </span><span class="hl-9">/></span><br/><span class="hl-9"><</span><span class="hl-10">select</span><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'gender'</span><span class="hl-12">, { </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12"> })</span><span class="hl-0">}</span><span class="hl-9">></span><br/><span class="hl-1"> ...</span><br/><span class="hl-9"></</span><span class="hl-10">select</span><span class="hl-9">></span>
|
|
</code></pre>
|
|
|
|
<a href="#full-form-example" id="full-form-example" style="color: inherit; text-decoration: none;">
|
|
<h3>Full form example</h3>
|
|
</a>
|
|
<p>Below is a full example of a simple form.</p>
|
|
<pre><code class="language-tsx"><span class="hl-8">import</span><span class="hl-1"> </span><span class="hl-5">React</span><span class="hl-1"> </span><span class="hl-8">from</span><span class="hl-1"> </span><span class="hl-6">'react'</span><br/><span class="hl-8">import</span><span class="hl-1"> { </span><span class="hl-5">useForm</span><span class="hl-1"> } </span><span class="hl-8">from</span><span class="hl-1"> </span><span class="hl-6">'formplex-react'</span><br/><br/><span class="hl-0">interface</span><span class="hl-1"> </span><span class="hl-4">MyFormData</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-5">companyName</span><span class="hl-1">: </span><span class="hl-4">string</span><br/><span class="hl-1"> </span><span class="hl-5">employeesCount</span><span class="hl-1">: </span><span class="hl-4">number</span><br/><span class="hl-1"> </span><span class="hl-5">revenueRange</span><span class="hl-1">: </span><span class="hl-6">'$0-$50K'</span><span class="hl-1"> | </span><span class="hl-6">'$50-$500K'</span><span class="hl-1"> | </span><span class="hl-6">'$500K-$1M'</span><span class="hl-1"> | </span><span class="hl-6">'$1M+'</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-8">export</span><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> </span><span class="hl-3">MyForm</span><span class="hl-1">: </span><span class="hl-4">React</span><span class="hl-1">.</span><span class="hl-4">FC</span><span class="hl-1"> = () </span><span class="hl-0">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">const</span><span class="hl-1"> { </span><span class="hl-2">field</span><span class="hl-1">, </span><span class="hl-2">handleSubmit</span><span class="hl-1">, </span><span class="hl-2">isValid</span><span class="hl-1">, </span><span class="hl-2">errors</span><span class="hl-1"> } = </span><span class="hl-3">useForm</span><span class="hl-1"><</span><span class="hl-4">MyFormData</span><span class="hl-1">>({</span><br/><span class="hl-1"> </span><span class="hl-3">onSubmit</span><span class="hl-1">(</span><span class="hl-5">values</span><span class="hl-1">, </span><span class="hl-5">e</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-5">console</span><span class="hl-1">.</span><span class="hl-3">log</span><span class="hl-1">(</span><span class="hl-6">'Form submitted:'</span><span class="hl-1">, </span><span class="hl-5">values</span><span class="hl-1">)</span><br/><span class="hl-1"> </span><span class="hl-3">fetch</span><span class="hl-1">(</span><span class="hl-6">'/submit'</span><span class="hl-1">, { </span><span class="hl-5">method:</span><span class="hl-1"> </span><span class="hl-6">'POST'</span><span class="hl-1">, </span><span class="hl-5">body:</span><span class="hl-1"> </span><span class="hl-2">JSON</span><span class="hl-1">.</span><span class="hl-3">stringify</span><span class="hl-1">(</span><span class="hl-5">values</span><span class="hl-1">) })</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> })</span><br/><br/><span class="hl-1"> </span><span class="hl-8">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">form</span><span class="hl-1"> </span><span class="hl-11">onSubmit</span><span class="hl-1">=</span><span class="hl-0">{</span><span class="hl-5">handleSubmit</span><span class="hl-0">}</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">input</span><br/><span class="hl-1"> </span><span class="hl-11">type</span><span class="hl-1">=</span><span class="hl-6">"text"</span><br/><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'companyName'</span><span class="hl-12">, {</span><br/><span class="hl-12"> </span><span class="hl-5">minLength:</span><span class="hl-12"> </span><span class="hl-13">5</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-5">maxLength:</span><span class="hl-12"> </span><span class="hl-13">50</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12">,</span><br/><span class="hl-12"> })</span><span class="hl-0">}</span><br/><span class="hl-1"> </span><span class="hl-9">/></span><br/><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">companyName</span><span class="hl-12"> </span><span class="hl-1">&&</span><span class="hl-12"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-12"> </span><span class="hl-11">style</span><span class="hl-1">=</span><span class="hl-0">{</span><span class="hl-12">{ </span><span class="hl-5">color:</span><span class="hl-12"> </span><span class="hl-6">'red'</span><span class="hl-12"> }</span><span class="hl-0">}</span><span class="hl-9">></span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">companyName</span><span class="hl-12">.</span><span class="hl-5">message</span><span class="hl-0">}</span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><span class="hl-0">}</span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">input</span><br/><span class="hl-1"> </span><span class="hl-11">type</span><span class="hl-1">=</span><span class="hl-6">"number"</span><br/><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'employeesCount'</span><span class="hl-12">, {</span><br/><span class="hl-12"> </span><span class="hl-5">parse:</span><span class="hl-12"> </span><span class="hl-5">Number</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-5">pattern:</span><span class="hl-14"> /</span><span class="hl-15">^</span><span class="hl-14">\d</span><span class="hl-16">+</span><span class="hl-15">$</span><span class="hl-14">/</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12">,</span><br/><span class="hl-12"> </span><span class="hl-3">validate</span><span class="hl-5">:</span><span class="hl-12"> (</span><span class="hl-5">n</span><span class="hl-12">) </span><span class="hl-0">=></span><span class="hl-12"> (</span><span class="hl-5">n</span><span class="hl-12"> </span><span class="hl-1"><</span><span class="hl-12"> </span><span class="hl-13">1</span><span class="hl-12"> </span><span class="hl-1">?</span><span class="hl-12"> </span><span class="hl-6">'Must have at least 1 employee.'</span><span class="hl-12"> </span><span class="hl-1">:</span><span class="hl-12"> </span><span class="hl-0">null</span><span class="hl-12">),</span><br/><span class="hl-12"> })</span><span class="hl-0">}</span><br/><span class="hl-1"> </span><span class="hl-9">/></span><br/><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">employeesCount</span><span class="hl-12"> </span><span class="hl-1">&&</span><span class="hl-12"> (</span><br/><span class="hl-12"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-12"> </span><span class="hl-11">style</span><span class="hl-1">=</span><span class="hl-0">{</span><span class="hl-12">{ </span><span class="hl-5">color:</span><span class="hl-12"> </span><span class="hl-6">'red'</span><span class="hl-12"> }</span><span class="hl-0">}</span><span class="hl-9">></span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">employeesCount</span><span class="hl-12">.</span><span class="hl-5">message</span><span class="hl-0">}</span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-12"> )</span><span class="hl-0">}</span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">select</span><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-1">...</span><span class="hl-3">field</span><span class="hl-12">(</span><span class="hl-6">'revenueRange'</span><span class="hl-12">, { </span><span class="hl-5">required:</span><span class="hl-12"> </span><span class="hl-0">true</span><span class="hl-12"> })</span><span class="hl-0">}</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">option</span><span class="hl-1"> </span><span class="hl-11">value</span><span class="hl-1">=</span><span class="hl-6">"$0-$50K"</span><span class="hl-9">></span><span class="hl-1">$0-$50K</span><span class="hl-9"></</span><span class="hl-10">option</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">option</span><span class="hl-1"> </span><span class="hl-11">value</span><span class="hl-1">=</span><span class="hl-6">"$50-$500K"</span><span class="hl-9">></span><span class="hl-1">$50-$500K</span><span class="hl-9"></</span><span class="hl-10">option</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">option</span><span class="hl-1"> </span><span class="hl-11">value</span><span class="hl-1">=</span><span class="hl-6">"$500K-$1M"</span><span class="hl-9">></span><span class="hl-1">$500K-$1M</span><span class="hl-9"></</span><span class="hl-10">option</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">option</span><span class="hl-1"> </span><span class="hl-11">value</span><span class="hl-1">=</span><span class="hl-6">"$1M+"</span><span class="hl-9">></span><span class="hl-1">$1M+</span><span class="hl-9"></</span><span class="hl-10">option</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">select</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">revenueRange</span><span class="hl-12"> </span><span class="hl-1">&&</span><span class="hl-12"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-12"> </span><span class="hl-11">style</span><span class="hl-1">=</span><span class="hl-0">{</span><span class="hl-12">{ </span><span class="hl-5">color:</span><span class="hl-12"> </span><span class="hl-6">'red'</span><span class="hl-12"> }</span><span class="hl-0">}</span><span class="hl-9">></span><span class="hl-0">{</span><span class="hl-5">errors</span><span class="hl-12">.</span><span class="hl-5">revenueRange</span><span class="hl-12">.</span><span class="hl-5">message</span><span class="hl-0">}</span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><span class="hl-0">}</span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">button</span><span class="hl-1"> </span><span class="hl-11">type</span><span class="hl-1">=</span><span class="hl-6">"submit"</span><span class="hl-1"> </span><span class="hl-11">disabled</span><span class="hl-1">=</span><span class="hl-0">{</span><span class="hl-1">!</span><span class="hl-5">isValid</span><span class="hl-0">}</span><span class="hl-9">></span><br/><span class="hl-1"> Save</span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">button</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">div</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"></</span><span class="hl-10">form</span><span class="hl-9">></span><br/><span class="hl-1"> )</span><br/><span class="hl-1">}</span>
|
|
</code></pre>
|
|
|
|
<a href="#tips" id="tips" style="color: inherit; text-decoration: none;">
|
|
<h3>Tips</h3>
|
|
</a>
|
|
<ul>
|
|
<li>You normally don't need to use <code>state</code> to return the values of the form, you can use <code>onSubmit</code>
|
|
for most use-cases; however it is available when you need it.</li>
|
|
<li>Use <code>setValue</code> or <code>setValues</code> when you manually need to change input values.</li>
|
|
<li>You can check for the existence of each field inside <code>errors</code> to know if there are any errors on
|
|
that field. You can then check the type and message of said error if it exists.</li>
|
|
</ul>
|
|
|
|
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
|
|
<h2>Contributing</h2>
|
|
</a>
|
|
<p>I am developing this package on my free time, so any support, whether code, issues, or just stars is
|
|
very helpful to sustaining its life. If you are feeling incredibly generous and would like to donate
|
|
just a small amount to help sustain this project, I would be very very thankful!</p>
|
|
<a href='https://ko-fi.com/casraf' target='_blank'>
|
|
<img height='36' style='border:0px;height:36px;'
|
|
src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3'
|
|
alt='Buy Me a Coffee at ko-fi.com' />
|
|
</a>
|
|
|
|
<p>I welcome any issues or pull requests on GitHub. If you find a bug, or would like a new feature,
|
|
don't hesitate to open an appropriate issue and I will do my best to reply promptly.</p>
|
|
<p>If you are a developer and want to contribute code, here are some starting tips:</p>
|
|
<ol>
|
|
<li>Fork this repository</li>
|
|
<li>Run <code>yarn install</code></li>
|
|
<li>Run <code>yarn start</code> to start file watch mode</li>
|
|
<li>Make any changes you would like</li>
|
|
<li>Create tests for your changes</li>
|
|
<li>Update the relevant documentation (readme, code comments, type comments)</li>
|
|
<li>Create a PR on upstream</li>
|
|
</ol>
|
|
</div></div>
|
|
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
|
|
<div class="tsd-navigation settings">
|
|
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
|
|
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
|
|
<div class="tsd-accordion-details">
|
|
<div class="tsd-filter-visibility">
|
|
<h4 class="uppercase">Member Visibility</h4><form>
|
|
<ul id="tsd-filter-options">
|
|
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
|
|
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
|
|
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
|
|
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
|
|
<div class="tsd-theme-toggle">
|
|
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
|
|
<nav class="tsd-navigation primary">
|
|
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
|
|
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
|
|
<div class="tsd-accordion-details">
|
|
<ul>
|
|
<li class="current selected"><a href="modules.html">formplex-<wbr/>react</a>
|
|
<ul>
|
|
<li class="tsd-kind-namespace"><a href="modules/validator.html">validator</a></li></ul></li></ul></div></details></nav>
|
|
<nav class="tsd-navigation secondary menu-sticky">
|
|
<ul>
|
|
<li class="tsd-kind-interface"><a href="interfaces/ErrorMessage.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>Error<wbr/>Message</a></li>
|
|
<li class="tsd-kind-interface"><a href="interfaces/ErrorStrings.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Error<wbr/>Strings</a></li>
|
|
<li class="tsd-kind-interface"><a href="interfaces/FieldOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Field<wbr/>Options</a></li>
|
|
<li class="tsd-kind-interface"><a href="interfaces/UseFormOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Use<wbr/>Form<wbr/>Options</a></li>
|
|
<li class="tsd-kind-interface"><a href="interfaces/UseFormReturn.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Use<wbr/>Form<wbr/>Return</a></li>
|
|
<li class="tsd-kind-type-alias"><a href="types/MessageResolver.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4194304-path"></rect><path d="M11.31 16V8.224H8.91V7.24H14.79V8.224H12.39V16H11.31Z" fill="var(--color-text)" id="icon-4194304-text"></path></svg>Message<wbr/>Resolver</a></li>
|
|
<li class="tsd-kind-type-alias"><a href="types/Validator-1.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Validator</a></li>
|
|
<li class="tsd-kind-function"><a href="functions/useForm.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>use<wbr/>Form</a></li></ul></nav></div></div>
|
|
<div class="container tsd-generator">
|
|
<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
|
|
<div class="overlay"></div><script src="assets/main.js"></script></body></html> |