If components are a way to share JS logic between multiple, composable DOM nodes; directives are a way to assign logic to any single DOM node.

Playful Programming

Directives are a way to attach reusable JavaScript logic to individual DOM nodes without creating a full component. This chapter from the Framework Field Guide covers how React, Angular, and Vue each implement directives. In React, custom hooks combined with element refs serve as the directive equivalent. Examples include styling elements, auto-focusing on render using useEffect, passing data (including class instances and multiple arguments) to directives, conditionally rendering UI via feature flags, and a final challenge building a reusable tooltip directive using createPortal.