From 29d362b2f31e1c3a5ff00ea3a9a8be061c9dd972 Mon Sep 17 00:00:00 2001
From: linxianxi <904492381@qq.com>
Date: Thu, 18 Jan 2024 16:54:51 +0800
Subject: [PATCH] docs: add example to md

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

diff --git a/README.md b/README.md
index 51906fa..0a5c61a 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,56 @@ pnpm i react-selectable-box
 
 [docs](https://linxianxi.github.io/react-selectable-box/)
 
+### Example
+
+```typescript
+import Selectable, { useSelectable } from 'react-selectable-box';
+
+const list: number[] = [];
+for (let i = 0; i < 200; i++) {
+  list.push(i);
+}
+
+const App = () => {
+  return (
+    <Selectable>
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 20,
+          padding: 20,
+          border: '1px solid #ccc',
+        }}
+      >
+        {list.map((i) => (
+          <Item key={i} value={i} />
+        ))}
+      </div>
+    </Selectable>
+  );
+};
+
+const Item = ({ value }: { value: number }) => {
+  const { setNodeRef, isSelected, isAdding } = useSelectable({
+    value,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        width: 50,
+        height: 50,
+        borderRadius: 4,
+        border: isAdding ? '1px solid #1677ff' : undefined,
+        background: isSelected ? '#1677ff' : '#ccc',
+      }}
+    />
+  );
+};
+```
+
 ## Changelog
 
 [CHANGELOG](https://linxianxi.github.io/react-selectable-box/changelog)