@kitsuyui/react-textfield


This package provides a text field component for React.

It is very pure and similar with the default element and </code> element.</p><p class="my-3">So you can pass the same props as those elements. (i.e. <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">disabled</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">placeholder</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">maxLength</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">minLength</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">required</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">pattern</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">readOnly</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">autoComplete</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">autoFocus</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">name</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">id</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">className</code>, <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">style</code>, ..., etc.)<br />This means, you can use this component as a drop-in replacement for those elements.</p><p class="my-3">The big difference is that this component how to handle the events.<br />In default browser elements (<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><input type="text"></code> and <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><textarea></code>), the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">onChange</code> event is fired in every key press.<br />But when you are using IME or something special input method, the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">onChange</code> event is fired in every key press even if the input is not completed or text conversion is not completed. (e.g. Japanese IME, Chinese IME, espanso, etc.)<br />This component calls the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">onInput</code> handler <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">(text: string) => void</code> only when the input is completed or text conversion is completed. (Internally, it uses <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">CompositionEvent</code> to detect the completion of input or text conversion)</p><p class="my-3">Warning: This component has no effect to prevent the re-rendering of parent component.<br />This means, if this component is re-created by parent component, the input may lost text conversion state.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Demo</h2></p><p class="my-3">Storybook: https://react-playground.docs.kitsuyui.com/storybook/</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />npm install @kitsuyui/react-textfield<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />yarn add @kitsuyui/react-textfield<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">sh<br />pnpm add @kitsuyui/react-textfield<br /></code>``</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Reference</h2></p><p class="my-3">- https://maku.blog/p/cv6fpx7/<br />- https://gist.github.com/KurtGokhan/9aafd8e83c9bc6a2946fe2dc7f2c1d19<br />- https://qiita.com/pochman/items/5b69ebedf4465f93c2f1</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT<br /></p></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.1.0\"}]\n28:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.1.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>