React සංවර්ධකයින් අතර තවත් නවතම උපකරණයක් වශයෙන් useDropZone Hook එක හඳුන්වා දෙනවා. මේ Hook එක @reactuses/core පෞද්ගලික පුස්තකාලයෙන් ලබා ගත හැකි අතර, ෆයිල් ඩ්රොප් සෝන් එකක් සකස් කරන අවශ්යතාවය තිබුනොත්, බ්රවුසරයේ dragenter/dragleave සිදුවීම් හේතුවෙන් ඇතිවන බ්ලින්ක් ප්රශ්නයක් නොමැතිව සරලව ක්රියාත්මක කරයි.
ඉස්සරහට බොහෝ සංවර්ධකයින් onDragEnter සහ onDragLeave භාවිතා කර, isOver නාමක boolean එකක් පාලනය කරයි. නමුත් සෝන් එක තුළ child element (උදා: <span> හෝ පින්තූරයක්) තිබේ නම්, පෙන්වීමේ සීමා හරහා මාරු වන විට dragenter සහ dragleave සිදුවීම් එකිනෙකට බලාපොරොත්තු නොවූ පරිදි බබළයි. ඒ නිසා බෝඩර් එක බ්ලින්ක් වීම, UI අසාර්ථක බවක් පෙනේ.
useDropZone Hook එක මෙය සරල counter‑මත පදනම් වූ ක්රමයක් භාවිතා කර සකසයි. සෑම dragenter සිදුවීමකටම counter එක වැඩි කරයි, dragleave සිදුවීමකටම අඩු කරයි. counter එක ශුන්ය වන තුරු isOver true තත්ත්වය පවතී, එවිට පරිශීලකයින්ගේ ෆයිල් අතුරුදන් නොවෙයි. එමෙන්ම dragover සිදුවීමේ preventDefault() අමතක නොකළ යුතුය, නැතිනම් drop සිදුවීමක් නොලැබේ.
ශ්රී ලංකාවට ඇති වැදගත්කම
- සැලසුම් ශිෂ්යයන් – React අධ්යයනය කරන විශ්වවිද්යාල ශිෂ්යයින්ට real‑time drag‑and‑drop UI ක්රියාකාරකම් ඉගෙන ගැනීමට හොඳ උදාහරණයක්.
- වෙබ් සංවර්ධකයින් – කේතය කෙටි, පැහැදිලි, TypeScript‑first API එකක් නිසා, ප්රොජෙක්ට් එකේ අඩු maintenance cost එකක් ලබා ගත හැක.
- ව්යාපාරිකයන් – ගනුදෙනුකරුවන්ගේ ලේඛන ඇප්ලිකේෂන්, CMS, e‑commerce වැනි පද්ධතිවල drag‑drop අංගයක් එකතු කිරීමේදී UI glitch‑වලින් පාරිභෝගික අත්දැකීම අඩු නොවීමේ විශාල ප්රතිලාභ.
අවසන් වශයෙන්, useDropZone Hook එකේ අන්තර්ගත කේතය කෙටි, පැහැදිලි, සහ ඉතා සරලයි. එය React ප්රොජෙක්ට් එකකට තවත් එකතු කිරීමේදී, UI flicker ගැටලුවක් නොසිදුවී, ෆයිල් ලැයිස්තුවක් File[] වශයෙන් සෘජුව ලබා ගත හැක. ඔබේ ඊළඟ වෙබ් යෙදුමට මේ Hook එක එකතු කර, පරිශීලක අත්දැකීම උසස් කර බලන්න.
