@a11y-hud/react 0.2.0 → 0.2.2

package/LICENSE

@@ -19,8 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-This software includes icons from Lucide (https://lucide.dev/).
-See LICENSE-ICONS.md for details.

package/README.md

@@ -0,0 +1,93 @@
+# @a11y-hud/react
+
+React adapter for [a11y-hud](https://www.npmjs.com/package/a11y-hud) — run axe-core accessibility audits in your React app with no browser extension required.
+
+## Install
+
+```sh
+npm install a11y-hud @a11y-hud/react
+```
+
+Peer dependencies: `react@>=18`, `react-dom@>=18`.
+
+## Usage
+
+### Component
+
+Drop `<A11yHud />` anywhere in your React tree. It renders nothing into the React DOM — the HUD panel is appended to `document.body` as a Custom Element.
+
+```tsx
+import { A11yHud } from "@a11y-hud/react";
+
+export function App() {
+  return (
+    <>
+      <A11yHud theme="auto" />
+      {/* rest of your app */}
+    </>
+  );
+}
+```
+
+### Hook
+
+Use `useA11yHud` when you need programmatic access to `runScan` or `setTheme`.
+
+```tsx
+import { useA11yHud } from "@a11y-hud/react";
+
+function DevTools() {
+  const { runScan, setTheme } = useA11yHud({ theme: "auto" });
+
+  return <button onClick={() => runScan()}>Scan now</button>;
+}
+```
+
+### Subtree scoping
+
+Restrict the scan to a specific subtree by passing a ref.
+
+```tsx
+import { useRef } from "react";
+import { A11yHud } from "@a11y-hud/react";
+
+function App() {
+  const scopeRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <A11yHud scope={scopeRef} />
+      <div ref={scopeRef}>
+        {/* only this subtree is scanned */}
+      </div>
+    </>
+  );
+}
+```
+
+### Route change rescans
+
+For React Router (or any router), ensure the component containing `<A11yHud>` re-renders on navigation so the render-settled rescan fires. The standard approach is `useLocation()`:
+
+```tsx
+import { useLocation } from "react-router-dom";
+import { A11yHud } from "@a11y-hud/react";
+
+function AppContent() {
+  useLocation(); // subscribes to route changes
+  return <A11yHud />;
+}
+```
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `"auto" \| "default" \| "light" \| "high-contrast"` | `"auto"` | Panel theme |
+| `scope` | `RefObject<Element \| null>` | — | Restrict scan to a subtree |
+| `autoScan` | `boolean` | `true` | Auto-rescan on DOM mutations |
+| `debounce` | `number` | `500` | Debounce delay in ms |
+
+## License
+
+MIT © Arthur Vasconcelos

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a11y-hud/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React adapter for a11y-hud — run axe-core accessibility audits in your React app with no DevTools required.",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "README.md"
   ],
   "dependencies": {
-    "a11y-hud": "0.1.0"
+    "a11y-hud": "0.1.2"
   },
   "peerDependencies": {
     "react": ">=18",