From 77c067133d8944cf99551011db153d877ecb318b Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Thu, 18 Sep 2025 15:16:30 -0700
Subject: [PATCH] docs: add React README

---
 packages/react/README.md | 45 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 packages/react/README.md

diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 0000000..314ad41
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,45 @@
+# 🔄 Sync Skeleton for React ⚛️
+
+A modern skeleton loader that supports syncing multiple elements' loading indicator at the same time.
+
+![A skeleton loader with a line going through multiple elements at the same time despite different widths](https://raw.githubusercontent.com/crutchcorn/sync-skeleton/refs/heads/main/media/skeleton.gif)
+
+## Installation
+
+```tsx
+import { useSkeletonSetup } from "@sync-skeleton/react"
+// Required for usage
+import "@sync-skeleton/core/skeleton.css"
+
+export function App() {
+  // Required in the root component for usage
+  useSkeletonSetup();
+
+  return (
+    // ...
+  )
+}
+```
+
+## Usage
+
+```tsx
+import { useSkeleton } from '@sync-skeleton/react'
+import styles from './element.module.css'
+
+export function Element() {
+  // Use the hoof to get a ref to the element, this establishes the CSS properties needed for the class to work
+  const ourEl = useSkeleton()
+
+  return (
+    // Add the global `loading-skeleton` class to the element
+    <div ref={ourEl} className={`loading-skeleton ${styles.yourClassname}`} />
+  )
+}
+```
+
+## Caveats
+
+- `.loading-skeleton` elements must not have an `::after` pseudo-element
+- `.loading-skeleton` elements must be `relative`ly or `absolute`ly positioned (defaulted to `relative` through our class)
+- `.loading-skeleton` elements must have `overflow` set to `hidden` (defaulted through our class)
-- 
2.51.2