From 6370f607f82a8d4184bdb24417a906b3d4bef8d6 Mon Sep 17 00:00:00 2001
From: Harvey Zhao <laozhaochaguan@gmail.com>
Date: Sun, 4 Jan 2026 16:28:42 +0800
Subject: [PATCH] feat: add React and Vue usage examples to documentation

---
 README.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 88d6998ae..cda0bfd80 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,69 @@ let art = new Artplayer({
 })
 ```
 
+## React
+
+```jsx
+import Artplayer from 'artplayer'
+import { useEffect, useRef } from 'react'
+
+export default function Player({ option, getInstance, ...rest }) {
+  const $container = useRef()
+
+  useEffect(() => {
+    const art = new Artplayer({
+      ...option,
+      container: $container.current,
+    })
+
+    if (typeof getInstance === 'function') {
+      getInstance(art)
+    }
+
+    return () => art.destroy(false)
+  }, [])
+
+  return <div ref={$container} {...rest}></div>
+}
+```
+
+## Vue
+
+```vue
+<template>
+  <div ref="$container" />
+</template>
+
+<script setup>
+import Artplayer from 'artplayer'
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['getInstance'])
+
+const art = shallowRef(null)
+const $container = ref(null)
+
+onMounted(() => {
+  art.value = new Artplayer({
+    ...props.option,
+    container: $container.value,
+  })
+  emit('getInstance', art.value)
+})
+
+onBeforeUnmount(() => {
+  art.value.destroy(false)
+})
+</script>
+```
+
 ## Plugins
 
 | Name | Describe | State |
@@ -159,8 +222,6 @@ We accept donations through these channels:
 
 ![QQ Group](./images/qqgroup.png)
 
-[![Powered by DartNode](https://dartnode.com/branding/DN-Open-Source-sm.png)](https://dartnode.com 'Powered by DartNode - Free VPS for Open Source')
-
 ## License
 
 MIT © Harvey Zack