Skip to content

Commit

Permalink
fix: broken link on rhf post
Browse files Browse the repository at this point in the history
  • Loading branch information
theodorusclarence committed Apr 2, 2022
1 parent b094353 commit 2596298
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions src/contents/blog/rhf.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: '7 Form Components For React Hook Form I Always Use'
publishedAt: '2021-07-12'
lastUpdated: '2022-04-02'
description: 'Building forms with validation is tedious and repetitive, using reusable component will help building faster.'
englishOnly: 'true'
banner: 'nikola-johnny-mirkovic-wyM1KmMUSbA-unsplash_fzyj2q'
Expand All @@ -23,13 +24,13 @@ Building forms with validation is tedious and repetitive. So my friend and I cre
height={438}
/>

For the demo please visit [rhf.clarence.link](https://rhf.clarence.link)
For the demo please visit [rhf.thcl.dev](https://rhf.thcl.dev)

> I'm open for all suggestions and contributions to improve 🚀. Open a PR on the repository (available on the demo website) or email me at me@theodorusclarence.com
## Yup Demo

I also made a validation using Yup, you can access it on [https://rhf.clarence.link/yup](https://rhf.clarence.link/yup) along with the source code.
I also made a validation using Yup, you can access it on [https://rhf.thcl.dev/yup](https://rhf.thcl.dev/yup) along with the source code.

---

Expand Down Expand Up @@ -87,55 +88,55 @@ export default function Page() {

### 1. TextInput

[Link to demo](https://rhf.clarence.link/inputs#text-input)
[Link to demo](https://rhf.thcl.dev/inputs#text-input)

Normal Text Input, with error validation

![TextInput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdxmfpr423kfz00jiq2g.gif)

### 2. PasswordInput

[Link to demo](https://rhf.clarence.link/inputs#password-input)
[Link to demo](https://rhf.thcl.dev/inputs#password-input)

Password input with peek functionality

![PasswordInput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km75jce8ne1sz7uezw36.gif)

### 3. TextArea

[Link to demo](https://rhf.clarence.link/inputs#text-area)
[Link to demo](https://rhf.thcl.dev/inputs#text-area)

Normal TextArea Input

![TextArea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63rwadnb9yoz96fujbon.gif)

### 4. DatePicker

[Link to demo](https://rhf.clarence.link/inputs#date-picker)
[Link to demo](https://rhf.thcl.dev/inputs#date-picker)

Using `react-datepicker` library, provided with useful props like defaultYear, defaultMonth, locale lang

![DatePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlayfyv6qwpgvky306zj.gif)

### 5. Select (Native)

[Link to demo](https://rhf.clarence.link/inputs#select-native)
[Link to demo](https://rhf.thcl.dev/inputs#select-native)

Select Input using composition

![SelectNative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtar72d0x80jxutro873.gif)

### 6. File Upload Dropzone

[Link to demo](https://rhf.clarence.link/inputs#dropzone-input)
[Link to demo](https://rhf.thcl.dev/inputs#dropzone-input)

Using `react-dropzone` library, we can specify selected file extension in the props

![Dropzone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afxhanaz7tahfdehrglj.gif)

### 7. Select (react-select)

[Link to demo](https://rhf.clarence.link/inputs#select-react)
[Link to demo](https://rhf.thcl.dev/inputs#select-react)

Using `react-select` library, allowing us to search on the select input

Expand Down

1 comment on commit 2596298

@vercel
Copy link

@vercel vercel bot commented on 2596298 Apr 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.