--- title: Directives | daily.dev description: 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... canonical: https://daily.dev/posts/directives-mzpo0xlcb twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Directives | daily.dev og:description: 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... og:url: https://daily.dev/posts/directives-mzpo0xlcb og:image: https://api.daily.dev/og/posts/mzpO0xLcB.png og:image:alt: Directives og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Directives **[Playful Programming](https://daily.dev/sources/playfulprogramming)** · [@crutchcorn](https://daily.dev/crutchcorn) · 13 min read · 0 upvotes · 0 comments ## Summary 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. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Vue Basics: A Comprehensive Guide to Vue 3 Directives](https://daily.dev/posts/vue-basics-a-comprehensive-guide-to-vue-3-directives-rd9vuugfj) · Telerik · 20 upvotes · 1 comments --- Tags: [#react](https://daily.dev/tags/react), [#vuejs](https://daily.dev/tags/vuejs), [#angular](https://daily.dev/tags/angular) [View this post on daily.dev](https://daily.dev/posts/directives-mzpo0xlcb) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Directives","url":"https://daily.dev/posts/directives-mzpo0xlcb","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/directives-mzpo0xlcb"},"datePublished":"2026-03-16T21:47:30.574Z","dateModified":"2026-03-17T18:01:20.548Z","description":"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...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/546bd0f0dd066c1d0a5983b63e8a6e9a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/546bd0f0dd066c1d0a5983b63e8a6e9a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Playful Programming","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Corbin Crutchley","url":"https://daily.dev/crutchcorn","image":"https://avatars.githubusercontent.com/u/9100169?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":400}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/directives-mzpo0xlcb","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,vuejs,angular","timeRequired":"PT13M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Playful Programming","item":"https://daily.dev/sources/playfulprogramming"},{"@type":"ListItem","position":3,"name":"Directives"}]} ```