From 559ba1da75fccaec0fd581f6d3ed47a9b7a96254 Mon Sep 17 00:00:00 2001
From: Axel Rindle <mail@axelrindle.de>
Date: Tue, 4 Jul 2023 22:10:19 +0200
Subject: [PATCH] Add browser example to docs

---
 docs/docs/examples/03-browser/_category_.json |  4 ++
 docs/docs/examples/03-browser/index.md        | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 docs/docs/examples/03-browser/_category_.json
 create mode 100644 docs/docs/examples/03-browser/index.md

diff --git a/docs/docs/examples/03-browser/_category_.json b/docs/docs/examples/03-browser/_category_.json
new file mode 100644
index 0000000..e839c07
--- /dev/null
+++ b/docs/docs/examples/03-browser/_category_.json
@@ -0,0 +1,4 @@
+{
+    "label": "🌐 Browser",
+    "position": 3
+}
diff --git a/docs/docs/examples/03-browser/index.md b/docs/docs/examples/03-browser/index.md
new file mode 100644
index 0000000..ee9b590
--- /dev/null
+++ b/docs/docs/examples/03-browser/index.md
@@ -0,0 +1,46 @@
+# Browser Usage
+
+Version 3.1.0 introduced official browser support.
+
+Visit [Browser Support](../../browser-support/) for more information.
+
+## Basic Usage
+
+```tsx
+import { CheckResult } from '@version-checker/api'
+import versionCheck from '@version-checker/browser'
+import { useState } from 'react'
+import { useQuery } from 'react-query'
+
+export default function App() {
+    const { data } = useQuery<CheckResult['update'], any, CheckResult['update'], any>({
+        queryKey: ['updater'],
+        queryFn: async () => {
+            const { update } = await versionCheck({
+                owner: 'axelrindle',
+                repo: 'github-version-checker',
+                currentVersion: '1.2.3',
+            })
+
+            return update
+        }
+    })
+
+    return (
+        <p>
+            {data === undefined ?
+                (
+                    <p>
+                        No update found.
+                    </p>
+                ) :
+                (
+                    <p>
+                        <b>{data?.name}</b>
+                    </p>
+                )
+            }
+        </p>
+    )
+}
+```