From ffa92410d13ec85431f9e75a03e931c866146629 Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Thu, 18 Feb 2021 03:02:40 +0000
Subject: [PATCH] docs: add a section about using custom directives in render
 functions

---
 src/guide/render-function.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index e2b13c158f..adfd00b9e8 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -530,6 +530,27 @@ Similarly, if the value passed to `is` is a component options object then there'
 
 Much like a `<template>` tag, a `<component>` tag is only required in templates as a syntactical placeholder and should be discarded when migrating to a `render` function.
 
+### Custom Directives
+
+Custom directives can be applied to a VNode using [`withDirectives`](/api/global-api.html#withdirectives):
+
+```js
+const { h, resolveDirective, withDirectives } = Vue
+
+// ...
+
+// <div v-pin:top.animate="200"></div>
+render () {
+  const pin = resolveDirective('pin')
+
+  return withDirectives(h('div'), [
+    [pin, 200, 'top', { animate: true }]
+  ])
+}
+```
+
+[`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object.
+
 ## JSX
 
 If we're writing a lot of `render` functions, it might feel painful to write something like this: