Skip to content

Commit 618f50e

Browse files
committed
docs: add example for pasteTransformer and update latest sponsors
1 parent 79ce1d1 commit 618f50e

File tree

2 files changed

+16
-3
lines changed

2 files changed

+16
-3
lines changed

README.md

+15-2
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
<h3 align="center">Hero Sponsors 🎖️</h3>
66
<p align="center">
7-
<a href="https://resend.com" target="_blank">
7+
<a href="https://go.resend.com/input-otp" target="_blank">
88
<img alt="Resend" src='https://input-otp.rodz.dev/sponsors/resend-wordmark-white-in-black-bg.svg' width="130" style="aspect-ratio: auto;"/>
99
</a>
1010
</p>
1111

1212
<!-- <h3 align="center">Hero Sponsors</h3>
13-
<a href="https://resend.com" target="_blank" style="display: flex; justify-content: center; align-items: center; background-color: #000; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto;">
13+
<a href="https://go.resend.com/input-otp" target="_blank" style="display: flex; justify-content: center; align-items: center; background-color: #000; width: 150px; height: 150px; border-radius: 8px; margin: 0 auto;">
1414
<img alt="Resend" src='https://input-otp.rodz.dev/sponsors/resend-wordmark-white.svg' width="120px" style="aspect-ratio: auto;"/>
1515
</a> -->
1616

@@ -360,6 +360,19 @@ const { control } = useForm();
360360
```
361361
</details>
362362

363+
<details>
364+
<summary>Paste-transformers</summary>
365+
If you want to allow pasting of "XXX-XXX" even though the input's regex/pattern doesn't allow hyphen and its max length is 6, you can use the `pasteTransformer` prop.
366+
367+
```tsx
368+
<OTPInput
369+
// Transform the pasted text to parse hyphens but remove hyphens,
370+
// so it fits into the input's pattern and max length.
371+
pasteTransformer={(pasted) => pasted.replaceAll('-', '')}
372+
/>
373+
```
374+
</details>
375+
363376
## Caveats
364377

365378
<details>

apps/website/src/app/(pages)/(home)/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default async function IndexPage() {
9696

9797
<div className="mb-14 md:mb-20 lg:mb-20 lg:opacity-0 lg:animate-fade-up !duration-1000 ![animation-delay:3000ms] animate-none">
9898
<h3 className="text-center text-xl font-bold">Hero Sponsors</h3>
99-
<a className="relative size-[160px] flex items-center justify-center bg-muted/80 dark:bg-muted/20 rounded-xl mt-4 group" href="https://resend.com" target="_blank">
99+
<a className="relative size-[160px] flex items-center justify-center bg-muted/80 dark:bg-muted/20 rounded-xl mt-4 group" href="https://go.resend.com/input-otp" target="_blank">
100100
<div className="relative size-[65%] aspect-square group-hover:scale-110 transition-all duration-300 ease-out">
101101
<Image
102102
alt="Resend"

0 commit comments

Comments
 (0)