From d36f2f5f20230ad4c67fd512df78e1b8d21670d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor=20Sabater?= <web.nsabater@gmail.com>
Date: Tue, 15 Aug 2023 23:56:54 +0200
Subject: [PATCH] chore: add example of picker html tag

---
 README.md | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3e5e6ad..a3d7130 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ A dependency free utility for cropping images based on a focus point ~2.13kB gzi
 
 There are two ways to supply the coordinates when initializing the `FocusedImage` class
 
-#### Data Tags
+#### Using data tags
 
 ```html
 <div class="focused-image-container">
@@ -38,7 +38,7 @@ const img = document.querySelector('.focused-image') as HTMLImageElement
 const focusedImage = new FocusedImage(img)
 ```
 
-#### Using `focus` Option
+#### Using `focus` option
 
 ```html
 <div class="focused-image-container">
@@ -60,6 +60,18 @@ const focusedImage = new FocusedImage(img, {
 
 ### FocusPicker
 
+```html
+<div>
+   <img
+        id="focus-picker-img"
+        src="https://picsum.photos/2400/1400?image=1001"
+        alt=""
+        data-focus-x="0"
+        data-focus-y="0"
+    />
+</div>
+```
+
 Provide an `onChange` callback that will receive a `Focus` object that has `x` and `y` properties for the newly selected coordinates. Optionally supply a `focus` to initialize with, or a `retina` src to use instead of the default white ring SVG.
 
 ```ts