FormKit React - React ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๋๋์ด ๊ณต๊ฐ๋์์ต๋๋ค!
๐ฆ npm: https://www.npmjs.com/package/@jiin.seok/formkit-react
โ๏ธ github: https://github.com/JiinSeok/formkit-react
npm i @jiin.seok/formkit-react- ๐ฏ Compound Component Pattern์ผ๋ก ๊น๋ํ API
- ๐ ๋น๋ฐ๋ฒํธ ํ ๊ธ & ๋น๋ฐ๋ฒํธ ์ผ์น ๊ฒ์ฆ ์๋ ์์ฑ
- โ Zod ์คํค๋ง ์ง์ (์ ํ์ฌํญ)
- ๐ฎ React Hook Form ๊ธฐ๋ฐ ์ํ ๊ด๋ฆฌ
- โฟ ์ ๊ทผ์ฑ ์๋ฒฝ ์ง์ (ARIA ์๋ ์ฒ๋ฆฌ)
- ๐๏ธ ๊ณ ๊ธ Select ์ปดํฌ๋ํธ (Radix UI ํ์ฉ)
- useState 10๊ฐ ์ ์ธํ๋ค ์ง์น ๋ถ ๐ตโ๐ซ
- form validation ๋๋ฌธ์ ๋จธ๋ฆฌ ์ํ ๋ถ ๐ญ
- ๋น๋ฐ๋ฒํธ ํ ๊ธ ๋ฒํผ ๋งค๋ฒ ๋ง๋ค๊ธฐ ๊ท์ฐฎ์ ๋ถ ๐
- ๊ธํด์ ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐฐ์ธ ์๊ฐ ์๋ ๋ถ โฐ
<FormKit.Input type="password" /> // ๐๏ธ ํ ๊ธ ์๋ ์์ฑ
<FormKit.Input name="confirmPassword" /> // ๋น๋ฐ๋ฒํธ ์ผ์น ์๋ ๊ฒ์ฆ๋นํ์ธ๋: ์ฌ์ ๊ณผ์ ํ๋ค ๋๋ฌด ๋ฐ์ ํด๋ฒ๋ฆฐ ์ผ์ด์ค...! ๐
๋ง์ ๊ด์ฌ๊ณผ ํผ๋๋ฐฑ ๋ถํ๋๋ฆฝ๋๋ค! ๐
<FormKit.Root formId="login" onSubmit={handleSubmit}>
<FormKit.Field>
<FormKit.Label>Email</FormKit.Label>
<FormKit.Input name="email" type="email" required />
</FormKit.Field>
<FormKit.Field>
<FormKit.Label>Password</FormKit.Label>
<FormKit.Input name="password" type="password" required />
</FormKit.Field>
<FormKit.SubmitButton>Login</FormKit.SubmitButton>
</FormKit.Root>๐งโโ๏ธ a frontend developer with a knack for uncovering problems and weaving them into clean & magical solutions ๐งโโ๏ธ
And always on the lookout for great plugins โ๏ธ and switches! โจ๏ธ Any favorites to share?
Feel free to reach me at [email protected]
JetBrains users and tactile switch lovers, you're especially welcome ๐ค
Fun fact: I used to be a QA engineer, and I still obsess over seamless user experiences!
-
Languages & Frameworks
-
Tools
- ๐ Refactoring: Improving my Next.js + TypeScript applications
- ๐ Learning: Diving into HTTP concepts
- ๐ Exploring: Accessibility (making sure digital information is accessible through every possible way)
๐ง Excited to connect and craft clean & magical experiences together! ๐ง