Skip to content

Commit 67d2630

Browse files
aidenybaiaidenybai
committed
docs(README): Refactor instructions into list format
1 parent 2bcacc5 commit 67d2630

File tree

1 file changed

+50
-42
lines changed

1 file changed

+50
-42
lines changed

‎README.md‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -23,55 +23,23 @@ Get started in 5 seconds, add this script to your app:
2323
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
2424
```
2525

26-
**_Or_**, install it via npm:
27-
28-
```bash
29-
npm install react-scan
30-
```
31-
32-
Then, in your app, import this **BEFORE** `react`:
33-
34-
```js
35-
import { scan } from 'react-scan'; // import this BEFORE react
36-
import React from 'react';
37-
38-
scan({
39-
enabled: true,
40-
log: true, // logs render info to console (default: false)
41-
clearLog: false, // clears the console per group of renders (default: false)
42-
});
43-
```
44-
45-
Or, if you prefer a more manual approach, use the `withScan` API:
46-
47-
```js
48-
import { withScan } from 'react-scan';
49-
50-
const ExpensiveComponent = withScan(
51-
(props) => {
52-
// ...
53-
},
54-
{ log: true },
55-
);
56-
```
57-
58-
And voilà! You're ready to go.
59-
60-
## Framework-specific Installation
26+
Examples:
6127

28+
<ul>
29+
<li>
6230
<details>
63-
<summary>### Next.js (Pages Router)</summary>
31+
<summary>Next.js (Pages Router)</summary>
6432

6533
Add the script tag to your `pages/_document.tsx`:
6634

6735
```jsx
68-
import { Html, Head, Main, NextScript } from 'next/document'
36+
import { Html, Head, Main, NextScript } from 'next/document';
6937

7038
export default function Document() {
7139
return (
7240
<Html lang="en">
7341
<Head>
74-
+ <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
42+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
7543

7644
{/* rest of your scripts go under */}
7745
</Head>
@@ -80,14 +48,16 @@ export default function Document() {
8048
<NextScript />
8149
</body>
8250
</Html>
83-
)
51+
);
8452
}
8553
```
8654

8755
</details>
56+
</li>
8857

58+
<li>
8959
<details>
90-
<summary>### Next.js (App Router)</summary>
60+
<summary>Next.js (App Router)</summary>
9161

9262
Add the script tag to your `app/layout.tsx`:
9363

@@ -110,14 +80,16 @@ export default function RootLayout({
11080
```
11181

11282
</details>
83+
</li>
11384

85+
<li>
11486
<details>
115-
<summary>### Vite / Create React App / Remix</summary>
87+
<summary>Vite / Create React App</summary>
11688

11789
Add the script tag to your `index.html`:
11890

11991
```html
120-
<!DOCTYPE html>
92+
<!doctype html>
12193
<html lang="en">
12294
<head>
12395
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
@@ -131,6 +103,42 @@ Add the script tag to your `index.html`:
131103
```
132104

133105
</details>
106+
</li>
107+
</ul>
108+
109+
**_Or_**, install it via npm:
110+
111+
```bash
112+
npm install react-scan
113+
```
114+
115+
Then, in your app, import this **BEFORE** `react`:
116+
117+
```js
118+
import { scan } from 'react-scan'; // import this BEFORE react
119+
import React from 'react';
120+
121+
scan({
122+
enabled: true,
123+
log: true, // logs render info to console (default: false)
124+
clearLog: false, // clears the console per group of renders (default: false)
125+
});
126+
```
127+
128+
Or, if you prefer a more manual approach, use the `withScan` API:
129+
130+
```js
131+
import { withScan } from 'react-scan';
132+
133+
const ExpensiveComponent = withScan(
134+
(props) => {
135+
// ...
136+
},
137+
{ log: true },
138+
);
139+
```
140+
141+
And voilà! You're ready to go.
134142

135143
## Why React Scan?
136144

0 commit comments

Comments
 (0)