From bc6ca55e8d6c88d0a15d4f2d9c4f98657c45f163 Mon Sep 17 00:00:00 2001
From: Rodrigo Fernandes <rtfrodrigo@gmail.com>
Date: Fri, 28 Jan 2022 23:14:42 +0000
Subject: [PATCH] Update README.md

---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/README.md b/README.md
index bdf381f..ee43911 100644
--- a/README.md
+++ b/README.md
@@ -300,6 +300,48 @@ index 0000001..0ddf2ba
 </html>
 ```
 
+#### StimulusJS with TypeScript
+
+```ts
+import { Controller } from "@hotwired/stimulus";
+
+import {
+  Diff2HtmlUI,
+  Diff2HtmlUIConfig,
+} from "diff2html/lib/ui/js/diff2html-ui-slim.js";
+
+// Requires `yarn add highlight.js`
+import "highlight.js/styles/github.css";
+import "diff2html/bundles/css/diff2html.min.css";
+
+export default class extends Controller {
+  connect(): void {
+    const diff2htmlUi = new Diff2HtmlUI(
+      this.diffElement,
+      this.unifiedDiff,
+      this.diffConfiguration
+    );
+
+    diff2htmlUi.draw();
+  }
+
+  get unifiedDiff(): string {
+    return this.data.get("unifiedDiff") || "";
+  }
+
+  get diffElement(): HTMLElement {
+    return this.element as HTMLElement;
+  }
+
+  get diffConfiguration(): Diff2HtmlUIConfig {
+    return {
+      drawFileList: true,
+      matching: "lines",
+    };
+  }
+}
+```
+
 ## Diff2Html Usage
 
 ### Diff2Html API