Скачать или смотреть Reddit Clone Series Ep 12 – Dropzone Button react dropzone, Storybook, Dynamic States

In this episode, we wire up a custom Dropzone button for the community flow. We install a third-party dropzone component (built on react-dropzone), strip its default UI, and refactor it into a clean wrapper + render pattern for Storybook. Then we build a reusable DropzoneButton (Tailwind + ShadCN), add a custom Image icon, and control behavior via context—removing the implicit onClick from getRootProps while keeping drag behavior. Finally, we implement dynamic text when files exist and introduce a “bordered” button variant with proper hover/active styles.


Resources:
Buy me a coffee: buymeacoffee.com/bartingyo
Code Repository: https://github.com/bartingyo/reddit-c...
Next.js: https://nextjs.org/
Tailwind CSS: https://tailwindcss.com/
Shadcn UI: https://ui.shadcn.com/
Shadcn.io (Dropzone): https://www.shadcn.io/components/form...
React Dropzone: https://www.npmjs.com/package/react-d...
Storybook: https://storybook.js.org/

Timeline:
00:00 – Intro, target UX: drop vs crop, what we’re building
00:48 – Pick library & install (third-party component + react-dropzone)
02:12 – Storybook setup: create story & wire component
03:04 – Fix import (default vs named) & resolve compile error
03:49 – Refactor to wrapper; remove default UI; render via story
05:27 – Control behavior: strip onClick from root props, keep drag only
07:57 – Build DropzoneButton + custom Image icon; sizing & spacing
12:13 – Context onClick, Storybook onDrop state/logs; first commit
16:00 – Dynamic text when files exist + new “bordered” variant; finalize & commit


🔔 Don't forget to like, comment, and subscribe for more web dev videos! If you have suggestions or run into issues with your sidebar implementation, drop a comment below—let's solve it together! 🙌