A React component that allows users to drag and move both regular DOM elements as well as SVG elements.

Image for post
Image for post
Your move.

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. …


Different ways of type guarding and how they work, with wizard examples.

Image for post
Image for post

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. …


Handle element drag behaviors with a custom reusable React hook

Image for post
Image for post

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 (onpointermove, onpointerdown, etc.) to move our element . …

About

Tanner Marshall

Creative director and engineer at Osmosis.org. An illustrator/video creator turned web developer; now I create tools that help create engaging videos!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store