From 717482f4ab71f72bda41d3f0a6ec761392271f04 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Thu, 29 May 2025 18:19:26 +0200
Subject: [PATCH] [react] feat: Added docs for hooks/useSelection

---
 .../react/hooks/useselection/readme.mdx       | 64 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 3 deletions(-)

diff --git a/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx
index ffbf1a3fa19..e42daeb9f27 100644
--- a/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx
@@ -2,6 +2,64 @@
 title: useSelection
 ---
 
-:::note
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { Popout } from '@freesewing/react/components/Popout'
+import { Tab, Tabs } from '@freesewing/react/components/Tab'
+
+<DocusaurusDoc>
+
+The **useSelection** hook facilitates letting the user select one or more items
+from a list or array. You need to pass this list/array to the hook.
+
+## Example
+
+```js
+import { useSelection } from '@freesewing/react/hooks/useFilter'
+
+const MyComponent = ({ items = [] }) => {
+  const {
+    count,
+    selection,
+    setSelection,
+    toggle,
+    toggleAll,
+  } = useSelection(items)
+
+  // ...
+}
+```
+
+## Return value
+
+Calling the hook returns an object with the following properties:
+
+- [count](#count)
+- [selection](#selection)
+- [setSelection](#setselection)
+- [toggle](#toggle)
+- [toggleAll](#toggleAll)
+
+### count
+
+This holds the number of items currently selected.
+
+### selection
+
+This holds an object of selected items where the key is the index and the value the item itself.
+Call `selection.values()` to get an array.
+
+### setSelection
+
+This is a method that sets the selection manually, typically not used.
+
+# toggle
+
+This is a method that takes an index and toggles the selection for that item.
+
+# toggleAll
+
+This is a method will select all items, unless all items are currently
+selected. In that case, it will select zero items.
+
+</DocusaurusDoc>
+