react-grab 0.0.7 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -0
- package/dist/index.global.js +2698 -61
- package/package.json +4 -7
- package/dist/index.cjs +0 -454
- package/dist/index.d.cts +0 -3
- package/dist/index.js +0 -452
package/README.md
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
# react-grab
|
|
2
|
+
|
|
3
|
+
Inspect React components and copy their source file paths to clipboard.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install react-grab
|
|
9
|
+
# or
|
|
10
|
+
pnpm add react-grab
|
|
11
|
+
# or
|
|
12
|
+
yarn add react-grab
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
### Next.js (App Router)
|
|
18
|
+
|
|
19
|
+
Add to your `app/layout.tsx`:
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import Script from "next/script";
|
|
23
|
+
|
|
24
|
+
export default function RootLayout({ children }) {
|
|
25
|
+
return (
|
|
26
|
+
<html>
|
|
27
|
+
<head>
|
|
28
|
+
{process.env.NODE_ENV === "development" && (
|
|
29
|
+
<Script
|
|
30
|
+
src="//unpkg.com/react-grab@0.0.7/dist/index.global.js"
|
|
31
|
+
crossOrigin="anonymous"
|
|
32
|
+
strategy="beforeInteractive"
|
|
33
|
+
/>
|
|
34
|
+
)}
|
|
35
|
+
</head>
|
|
36
|
+
<body>{children}</body>
|
|
37
|
+
</html>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### How it works
|
|
43
|
+
|
|
44
|
+
1. Hold **Cmd** (Mac) for ~1 second to activate
|
|
45
|
+
2. Hover over any element on the page
|
|
46
|
+
3. Click to copy component stack trace and HTML to clipboard
|