1<!doctype html> 2<html class="h-full bg-white" lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta 6 name="description" 7 content="Rezact: Intuitive Reactivity, Simplified State. Embrace a modern UI framework that encourages direct data mutations, offers module-level reactivity, and simplifies component design. With Rezact, you get the power of reactivity without the boilerplate. Dive into a seamless development experience tailored for today's web." 8 /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10 11 <meta name="twitter:card" content="summary_large_image" /> 12 <meta name="twitter:site" content="@rezactio" /> 13 <meta name="twitter:title" content="Rezact" /> 14 <meta 15 name="twitter:description" 16 content="Because its time for a better client side rendered framework" 17 /> 18 <meta 19 name="twitter:image" 20 content="https://rezact.io/rezact-site-preview.png" 21 /> 22 23 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 24 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 25 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 26 <link rel="manifest" href="/site.webmanifest" /> 27 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> 28 <meta name="msapplication-TileColor" content="#2d89ef" /> 29 <meta name="theme-color" content="#ffffff" /> 30 <title>Rezact</title> 31 <link rel="modulepreload" href="/assets/LandingPage-O8X2SXEc.js" /> 32<link rel="modulepreload" href="/assets/mdx-LEb1kaIk.js" /> 33<link rel="modulepreload" href="/assets/ValidatorInput-PzAJrwPH.js" /> 34<link rel="modulepreload" href="/assets/Buttons-E-yT_r7C.js" /> 35<link rel="modulepreload" href="/assets/Form-cLix5-9l.js" /> 36<link rel="modulepreload" href="/assets/Counter-JZ6pTTpZ.js" /> 37 38
38<script type="module" crossorigin src="/assets/main-Ex-1LHMJ.js"></script>
38 39 <link rel="stylesheet" crossorigin href="/assets/main-4Ers5TFM.css"> 40 </head> 41 42 <body class="h-full"> 43 <div id="app"><div class="bg-zinc-900 pb-96"><div id="top"></div><header class="sticky inset-x-0 top-0 z-10 backdrop-blur-sm backdrop-filter"><nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global"><div class="flex lg:flex-1"><a href="/" class="-m-1.5 p-1.5 text-white"><span class="sr-only">Rezact</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo" width="29" height="32">Rezact</a></div><div class="flex lg:hidden"><button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"><span class="sr-only">Open main menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path></svg></button></div><div class="hidden lg:flex lg:gap-x-12"><a href="#top" class="text-sm font-semibold leading-6 text-white">Intro</a><a href="#features" class="text-sm font-semibold leading-6 text-white">Features</a><a href="/docs" class="text-sm font-semibold leading-6 text-white">Docs</a><a href="/playground" class="text-sm font-semibold leading-6 text-white">Playground</a><a href="https://www.github.com/rezact/rezact" class="text-sm font-semibold leading-6 text-white">Github</a></div><div class="hidden lg:flex lg:flex-1 lg:justify-end"></div></nav></header><div class="hidden" role="dialog" aria-modal="true"><div class="fixed inset-0 z-50 bg-zinc-900/80 opacity-0 transition-opacity duration-300 ease-linear"></div><div class="fixed inset-y-0 right-0 z-50 w-full translate-x-full overflow-y-auto bg-gray-900 px-6 py-6 transition duration-300 ease-in-out sm:max-w-sm sm:ring-1 sm:ring-white/10"><div class="flex items-center justify-between"><a href="#" class="-m-1.5 p-1.5 text-white"><span class="sr-only">Rezact</span><img class="h-8 w-auto" src="/rezact-logo.svg" alt="Rezact Logo" width="29" height="32">Rezact</a><button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-400"><span class="sr-only">Close menu</span><svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div class="mt-6 flow-root"><div class="-my-6 divide-y divide-gray-500/25"><div class="space-y-2 py-6"><a href="#top" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Intro</a><a href="#features" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Features</a><a href="/docs" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Docs</a><a href="/playground" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Playground</a><a href="https://www.github.com/rezact/rezact" class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800">Github</a></div></div></div></div></div><div class="relative isolate pt-14"><div class="py-6 sm:py-6 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class=" text-center"><img src="/rezact-logo.svg" alt="Rezact Logo" class="m-auto" width="454" height="493"><h1 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Rezact</h1><p class="mt-6 text-lg leading-8 text-gray-300">Because its time for a better client side rendered framework</p><div class="mt-10 flex items-center justify-center gap-x-6"><a href="/docs/getting-started" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Get started</a><a href="/playground" class="rounded-md bg-green-800 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-400 hover:text-green-950 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Try Playground</a><a href="/docs" class="text-sm font-semibold leading-6 text-white">Learn more <span aria-hidden="true">â</span></a></div></div></div></div></div><div id="features" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-lg px-4 text-xs text-white md:text-base"><div><div><h1 class="text-4xl">Svelte Hello World Bundle</h1><div> </div><div><span style="color: rgb(17, 168, 205);">vite v5.1.1 </span><span style="color: rgb(13, 188, 121);">building for production...</span> </div><div><span style="color: rgb(13, 188, 121);">â</span> 26 modules transformed. </div><div><span style="opacity: 0.5;">dist/</span><span style="color: rgb(13, 188, 121);">index.html </span><span style="font-weight: bold; opacity: 0.5;">0.33 kB</span><span style="opacity: 0.5;"> â gzip: 0.24 kB</span> </div><div><span style="opacity: 0.5;">dist/assets/</span><span style="color: rgb(17, 168, 205);">index-BYI6n3Ad.js </span><span style="font-weight: bold; opacity: 0.5;">3.97 kB</span><span class="whitespace-pre text-xl font-black text-red-600"> â gzip: 1.89 kB</span> </div><div><span style="color: rgb(13, 188, 121);">â built in 174ms</span> </div></div></div><div class="mt-12"><div><h1 class="text-4xl">Rezact Hello World Bundle</h1><div> </div><div><span style="color: rgb(17, 168, 205);">vite v5.1.1 </span><span style="color: rgb(13, 188, 121);">building for production...</span> </div><div><span style="color: rgb(13, 188, 121);">â</span> 4 modules transformed. </div><div><span style="opacity: 0.5;">dist/</span><span style="color: rgb(13, 188, 121);">index.html </span><span style="font-weight: bold; opacity: 0.5;">0.33 kB</span><span style="opacity: 0.5;"> â gzip: 0.24 kB</span> </div><div><span style="opacity: 0.5;">dist/assets/</span><span style="color: rgb(17, 168, 205);">index-xLpY-gYZ.js </span><span style="font-weight: bold; opacity: 0.5;">2.60 kB</span><span class="whitespace-pre text-xl font-black text-green-600"> â gzip: 1.25 kB</span> </div><div><span style="color: rgb(13, 188, 121);">â built in 212ms</span> </div></div></div></div></div></div></div><div id="counter" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h2>Intuitive Reactivity, Simplified State.</h2> 44<p>Embrace a modern UI framework that simplifies component design. With Rezact, you get the power of reactivity without the boilerplate.</p> 45<img src="/Signals.png" alt="Signals" height="238" width="672"><div class=" rounded bg-zinc-800 p-8"><h1>Hello World</h1><h2 id="test-value" class=" text-center">0</h2><div class="flex items-stretch gap-12"><button type="button" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn flex-1">Dec</button><button id="test-inc" type="button" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn flex-1">Inc</button></div></div></div></div></div></div><div id="signals-anywhere" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>No Hooks or Rules</h1> 46<p>No hook rules... create and use signals ANYWHERE in your code.</p> 47<img src="/SignalsAnywhere.webp" alt="SignalsAnyWhere" height="411" width="672"> 48<form class=" m-4 rounded bg-zinc-800 p-8"><!--start map--><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk0" sr-only="">Check 0</label><input id="chk0" type="checkbox"><p class="w-1/2 flex-1">jack</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk1" sr-only="">Check 1</label><input id="chk1" type="checkbox"><p class="w-1/2 flex-1">JILL</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk2" sr-only="">Check 2</label><input id="chk2" type="checkbox"><p class="w-1/2 flex-1">john</p></div><div class="flex items-center gap-4"><label for="test" class="sr-only">test</label><input name="test" id="test" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 w-1/2 flex-1" placeholder="" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="chk3" sr-only="">Check 3</label><input id="chk3" type="checkbox"><p class="w-1/2 flex-1">JANE</p></div><!--end map--></form><button type="button" class="rounded-md px-3.5 py-2.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn m-auto table">Compare to React</button></div></div></div></div><div id="stores" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Stores</h1> 49<p>State Management has never been easier than this. Just start with a simple module and some signals.</p> 50<pre><code class="hljs language-ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">userStore</span>: <span class="hljs-built_in">any</span> = { 51 <span class="hljs-attr">$isLoggedIn</span>: <span class="hljs-literal">
51false</span>, 52 <span class="hljs-attr">$userName</span>: <span class="hljs-string">""</span>, 53 <span class="hljs-attr">$email</span>: <span class="hljs-string">""</span>, 54}; 55 56<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logIn</span>(<span class="hljs-params">data</span>) { 57 userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">true</span>; 58 userStore.<span class="hljs-property">$userName</span> = data.<span class="hljs-property">username</span>; 59 userStore.<span class="hljs-property">$email</span> = data.<span class="hljs-property">email</span>; 60} 61 62<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">logOut</span>(<span class="hljs-params"></span>) { 63 userStore.<span class="hljs-property">$isLoggedIn</span> = <span class="hljs-literal">false</span>; 64 userStore.<span class="hljs-property">$userName</span> = <span class="hljs-string">""</span>; 65 userStore.<span class="hljs-property">$email</span> = <span class="hljs-string">""</span>; 66} 67</code></pre><a href="/docs/stores" class="rounded-md px-3.5 py-2.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn m-auto table">Show me more</a></div></div></div></div><div id="router" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Built in Router</h1> 68<p>No need to install an external dependency, Rezact comes with a built in router that is easy to use.</p> 69<pre><code class="hljs language-typescript"><span class="hljs-keyword">import</span> { useRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">"rezact/router"</span>; 70<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Page</span> <span class="hljs-keyword">as</span> <span class="hljs-title class_">FourOhFour</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Pages/404"</span>; 71 72<span class="hljs-keyword">const</span> router = <span class="hljs-title function_">useRouter</span>(); 73 74router.<span class="hljs-title function_">addRoute</span>(<span class="hljs-string">"/404"</span>, <span class="hljs-title class_">FourOhFour</span>); 75 76<span class="hljs-keyword">const</span> routes = [ 77 { 78 <span class="hljs-attr">path</span>: <span class="hljs-string">"/"</span>, 79 <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Pages/LandingPage"</span>), 80 <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span> 81 <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact"</span>, 82 }, 83 { 84 <span class="hljs-attr">path</span>: <span class="hljs-string">"/docs"</span>, 85 <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Docs/PageOne.mdx"</span>), 86 <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span> 87 <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact"</span>, 88 }, 89 { 90 <span class="hljs-attr">path</span>: <span class="hljs-string">"/users/:userId"</span>, 91 <span class="hljs-attr">component</span>: <span class="hljs-function">() =></span> <span class="hljs-keyword">import</span>(<span class="hljs-string">"src/Pages/Users"</span>), 92 <span class="hljs-attr">dataLoader</span>: <span class="hljs-function">() =></span> {} <span class="hljs-comment">// COMING SOON!</span> 93 <span class="hljs-attr">title</span>: <span class="hljs-string">"Rezact Users"</span>, 94 }, 95]; 96 97router.<span class="hljs-title function_">addRoutesFromConfig</span>(routes); 98 99<span class="hljs-keyword">export</span> { router }; 100</code></pre></div></div></div></div><div id="easy-forms" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Easy Forms</h1> 101<p>Forget everything you know about creating forms in react... Literally, forget it all. This is the easiest way to create forms. PERIOD.</p> 102<pre><code class="hljs language-jsx"><span class="hljs-keyword">
102import</span> { <span class="hljs-title class_">Form</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Form"</span>; 103<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Btn</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./Buttons"</span>; 104<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Input</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"./ValidatorInput"</span>; 105 106<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">LandingForm</span>(<span class="hljs-params"></span>) { 107 <span class="hljs-keyword">const</span> <span class="hljs-title function_">submit</span> = (<span class="hljs-params">data</span>) => { 108 <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data); <span class="hljs-comment">// { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="375d585f59775358521954585a">[email protected]</a>" }</span> 109 }; 110 111 <span class="hljs-keyword">return</span> ( 112 <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Form</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{submit}</span>></span> 113 <span class="hljs-tag"><<span class="hljs-name">Input</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email"</span> /></span> 114 <span class="hljs-tag"><<span class="hljs-name">Btn</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Submit<span class="hljs-tag"></<span class="hljs-name">Btn</span>></span> 115 <span class="hljs-tag"></<span class="hljs-name">Form</span>></span></span> 116 ); 117} 118</code></pre> 119<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div><div id="validation" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>Oh, you want validation?</h1> 120<p>Ok, here's a form with validation.</p> 121<pre><code class="hljs language-diff">import { Form } from "./Form"; 122<span class="hljs-addition">+import { Input } from "./ValidatorInput";</span> 123 124export function LandingForm() { 125 const submit = (data) => { 126 console.log(data); // { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5cfcacdcbe5c1cac08bc6cac8">[email protected]</a>" } 127 }; 128 129 return ( 130 <Form onSubmit={submit}> 131<span class="hljs-deletion">- <input name="email" placeholder="Email" /></span> 132<span class="hljs-addition">+ <Input required type="email" name="email" placeholder="Email" /></span> 133 <button type="submit">Submit</button> 134 </Form> 135 ); 136} 137</code></pre> 138<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="email"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div><div id="masking" class="relative isolate pt-14"><div class="py-24 sm:py-32 lg:pb-40"><div class="mx-auto max-w-7xl px-6 lg:px-8"><div class="mdx mx-auto max-w-2xl text-white"><h1>What!?!??! You also want masking and input value restrictions?</h1> 139<p>Fine... ð</p> 140<pre><code class="hljs language-diff">import { Form } from "./Form"; 141import { Input } from "./ValidatorInput"; 142<span class="hljs-addition">+import { luhnCheck } from "./validators";</span> 143 144export function LandingForm() { 145 const submit = (data) => { 146 console.log(data); // { email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5bfbabdbb95b1bab0fbb6bab8">[email protected]</a>" } 147 }; 148 149 return ( 150 <Form onSubmit={submit}> 151 <Input required type="email" name="email" placeholder="Email" /> 152<span class="hljs-addition">+ <Input</span> 153<span class="hljs-addition">+ exactLength={10}</span> 154<span class="hljs-addition">+ mask="(___) ___ ____"</span> 155<span class="hljs-addition">+ dataAccept={/[\d]/}</span> 156<span class="hljs-addition">+ showFullMaskWhileTyping</span> 157<span class="hljs-addition">+ validateUnMaskedValue</span> 158<span class="hljs-addition">+ name="telephone"</span> 159<span class="hljs-addition">+ /></span> 160<span class="hljs-addition">+ <Input</span> 161<span class="hljs-addition">+ minLength={15}</span> 162<span class="hljs-addition">+ maxLength={16}</span> 163<span class="hljs-addition">+ customValidator={luhnCheck}</span> 164<span class="hljs-addition">+ unmaskInputValueProp</span> 165<span class="hljs-addition">+ mask=".... .... .... ...."</span> 166<span class="hljs-addition">+ maskSlots="."</span> 167<span class="hljs-addition">+ dataAccept={/[\d]/}</span> 168<span class="hljs-addition">+ name="credit-card"</span> 169<span class="hljs-addition">+ /></span> 170 <button type="submit">Submit</button> 171 </Form> 172 ); 173} 174</code></pre> 175<div class="m-4 rounded-lg bg-zinc-800 p-10"><form><label for="email" class="sr-only">Email</label><input value="" name="email" id="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 " placeholder="Email" type="email"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="telephone" class="sr-only">Phone</label><input value="" name="telephone" id="telephone" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 mt-4" placeholder="Phone" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><label for="credit-card" class="sr-only">Credit Card</label><input value="" name="credit-card" id="credit-card" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 mt-4" placeholder="Credit Card" type="text"><div style="height: 0px;" class=" overflow-hidden text-xs text-red-600 transition-all"></div><button type="submit" class="rounded-md px-2.5 py-1.5 text-sm bg-indigo-600 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 rz-btn mt-4 w-full">Submit</button></form></div></div></div></div></div></div></div>
vendor: 111 bytes, lines 175-176
175 176 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
176<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"524e4b6a84534c9684ebc910662afa01","r":1,"spa":2}' crossorigin="anonymous"></script>
176 177</body> 178</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.