A React component that allows users to drag and move both regular DOM elements as well as SVG elements.
I love making interesting interactive web things, and I recently wrote an article about creating a
useDrag hook in React. Like I mentioned in that article, there are about a bazillion drag and/or drop libraries out there, both specifically for React or otherwise. For example,
react-beautiful-dnd is, well, a beautiful drag and drop implementation that’s intended to be used to move between lists, a lot like Trello. …
TypeScript rules, and I’ve spent hours converting various JS(X) files to TS(X). Along the way, I’ve encountered quite a few head-scratchers. One recent issue I ran into was a problem that necessitated the use of a type guard, which serves to “guard” a certain block of code from using the wrong type(s). It’s a relatively simple concept, but I thought I’d go through some of the common type guards…using examples with wizards!
Let’s say you’ve got yourself a ragtag fellowship of adventurers on a quest to destroy an ancient and evil ring, and the fate of all hangs in the balance. …
There’re approximately one billion libraries that handle moving and dragging for React floating around the Reactiverse, and a lot of them are actually pretty rad. Sometimes, though, you might not want a fully fledged library, or the libraries you found don’t accomplish what you need, or you just like to learn stuff and want to write your own darn code! 🤓
Something else to point out is that the hook we’ll be building is meant to be used for dragging an element on the page and actually changing its position through a
CSS property. We’ll therefore be using
pointer event handlers (
onpointerdown, etc.) to move our element . …