Skip to content

Commit 8e3fbba

Browse files
lxsmnsyclxsmnsyc
committed
Update README.md
1 parent e23fb55 commit 8e3fbba

File tree

1 file changed

+211
-39
lines changed

1 file changed

+211
-39
lines changed

‎packages/scan/README.md‎

Lines changed: 211 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -27,30 +27,36 @@ Airbnb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://polaris.shopify.com/"
2727
2828
## Install
2929

30-
Add this script to your app:
30+
```bash
31+
npm i react-scan
32+
```
3133

32-
```html
33-
<!-- import this BEFORE any scripts -->
34-
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
34+
```bash
35+
pnpm add react-scan
36+
```
37+
38+
```bash
39+
yarn add react-scan
3540
```
3641

37-
Examples:
42+
## Usage
3843

39-
<details>
40-
<summary><b>Next.js (pages)</b></summary>
44+
### As a script tag
4145

42-
<br />
46+
<details>
47+
<summary><b>NextJS (Page Router)</b></summary>
4348

44-
Add the script tag to your `pages/_document.tsx`:
49+
Add the script tag to your `pages/_document`:
4550

4651
```jsx
47-
import { Html, Head, Main, NextScript } from 'next/document';
52+
// pages/_document.jsx
53+
import { Html, Head, Main, NextScript } from "next/document";
4854

4955
export default function Document() {
5056
return (
5157
<Html lang="en">
5258
<Head>
53-
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
59+
<script src="https://unpkg.com/react-scan/dist/auto.global.js" />
5460

5561
{/* rest of your scripts go under */}
5662
</Head>
@@ -66,22 +72,19 @@ export default function Document() {
6672
</details>
6773

6874
<details>
69-
<summary><b>Next.js (app)</b></summary>
75+
<summary><b>NextJS (App Router)</b></summary>
7076

71-
<br />
72-
73-
Add the script tag to your `app/layout.tsx`:
77+
Add the script tag to your `app/layout`:
7478

7579
```jsx
80+
// app/layout.jsx
7681
export default function RootLayout({
7782
children,
78-
}: {
79-
children: React.ReactNode
8083
}) {
8184
return (
8285
<html lang="en">
8386
<head>
84-
<script src="https://unpkg.com/react-scan/dist/auto.global.js" async />
87+
<script src="https://unpkg.com/react-scan/dist/auto.global.js" />
8588
{/* rest of your scripts go under */}
8689
</head>
8790
<body>{children}</body>
@@ -93,9 +96,28 @@ export default function RootLayout({
9396
</details>
9497

9598
<details>
96-
<summary><b>Vite / Create React App</b></summary>
99+
<summary><b>Vite</b></summary>
97100

98-
<br />
101+
Add the script tag to your `index.html`:
102+
103+
```html
104+
<!doctype html>
105+
<html lang="en">
106+
<head>
107+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
108+
109+
<!-- rest of your scripts go under -->
110+
</head>
111+
<body>
112+
<!-- ... -->
113+
</body>
114+
</html>
115+
```
116+
117+
</details>
118+
119+
<details>
120+
<summary><b>CRA (Create React App)</b></summary>
99121

100122
Add the script tag to your `index.html`:
101123

@@ -115,33 +137,153 @@ Add the script tag to your `index.html`:
115137

116138
</details>
117139

118-
If you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/CHROME_EXTENSION_GUIDE.md), or React Native support, see [here](https://github.com/aidenybai/react-scan/pull/23).
140+
<details>
141+
<summary><b>Remix</b></summary>
119142

120-
## API Reference
143+
Add the script tag to your `app/root`:
121144

122-
If you need a programmatic API to debug further, install via NPM instead:
145+
```jsx
146+
// app/root.jsx
147+
import {
148+
Links,
149+
Meta,
150+
Outlet,
151+
Scripts,
152+
} from "@remix-run/react";
153+
154+
export default function App() {
155+
return (
156+
<html>
157+
<head>
158+
<script src="https://unpkg.com/react-scan/dist/auto.global.js" />
159+
<link
160+
rel="icon"
161+
href="data:image/x-icon;base64,AA"
162+
/>
163+
<Meta />
164+
<Links />
165+
</head>
166+
<body>
167+
<h1>Hello world!</h1>
168+
<Outlet />
123169

124-
```bash
125-
npm install react-scan
170+
<Scripts />
171+
</body>
172+
</html>
173+
);
174+
}
126175
```
127176

128-
Then, in your app, import this **BEFORE** `react`. This must run in a client context (e.g. not in a server component):
177+
</details>
129178

130-
```js
131-
import { scan } from 'react-scan'; // import this BEFORE react
132-
import React from 'react';
179+
<details>
180+
<summary><b>Parcel</b></summary>
133181

134-
if (typeof window !== 'undefined') {
135-
scan({
136-
enabled: true,
137-
log: true, // logs render info to console (default: false)
138-
});
182+
Add the script tag to your `index.html`:
183+
184+
```html
185+
<!doctype html>
186+
<html lang="en">
187+
<head>
188+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
189+
190+
<!-- rest of your scripts go under -->
191+
</head>
192+
<body>
193+
<!-- ... -->
194+
</body>
195+
</html>
196+
```
197+
</details>
198+
199+
<details>
200+
<summary><b>Astro</b></summary>
201+
202+
Add the script tag to your root layout
203+
204+
```astro
205+
<!doctype html>
206+
<html lang="en">
207+
<head>
208+
<script src="https://unpkg.com/react-scan/dist/auto.global.js" />
209+
210+
<!-- rest of your scripts go under -->
211+
</head>
212+
<body>
213+
<!-- ... -->
214+
</body>
215+
</html>
216+
```
217+
218+
</details>
219+
220+
<details>
221+
<summary><b>TanStack Start</b></summary>
222+
223+
Add the script tag to your `<RootDocument>` component at `app/routes/__root`:
224+
225+
```jsx
226+
// app/routes/__root.jsx
227+
import { Outlet, createRootRoute } from '@tanstack/react-router'
228+
import { Meta, Scripts } from '@tanstack/start'
229+
import type { ReactNode } from 'react'
230+
231+
export const Route = createRootRoute({
232+
head: () => ({
233+
meta: [
234+
{
235+
charSet: 'utf-8',
236+
},
237+
{
238+
name: 'viewport',
239+
content: 'width=device-width, initial-scale=1',
240+
},
241+
{
242+
title: 'TanStack Start Starter',
243+
},
244+
],
245+
}),
246+
component: RootComponent,
247+
})
248+
249+
function RootComponent() {
250+
return (
251+
<RootDocument>
252+
<Outlet />
253+
</RootDocument>
254+
)
255+
}
256+
257+
function RootDocument({ children }) {
258+
return (
259+
<html>
260+
<head>
261+
<script src="https://unpkg.com/react-scan/dist/auto.global.js" />
262+
<Meta />
263+
</head>
264+
<body>
265+
{children}
266+
<Scripts />
267+
</body>
268+
</html>
269+
)
139270
}
140271
```
141272

142-
> Looking for [React Native](https://github.com/aidenybai/react-scan/pull/23)?
273+
</details>
274+
275+
Add this script to your app:
276+
277+
```html
278+
<!-- import this BEFORE any scripts -->
279+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
280+
```
281+
282+
If you want to install the Chrome extension, follow the guide [here](https://github.com/aidenybai/react-scan/blob/main/CHROME_EXTENSION_GUIDE.md), or React Native support, see [here](https://github.com/aidenybai/react-scan/pull/23).
283+
284+
### CLI
143285

144-
If you don't have a localv version of the site, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
286+
If you don't have a local version of the site or you want to test a React app remotely, you can use the CLI. This will spin up an isolated browser instance which you can interact or use React Scan with.
145287

146288
```bash
147289
npx react-scan@latest http://localhost:3000
@@ -160,6 +302,36 @@ You can add it to your existing dev process as well. Here's an example for Next.
160302
}
161303
```
162304

305+
### API
306+
307+
### Chrome Extension
308+
309+
### React Native
310+
311+
## API Reference
312+
313+
If you need a programmatic API to debug further, install via NPM instead:
314+
315+
```bash
316+
npm install react-scan
317+
```
318+
319+
Then, in your app, import this **BEFORE** `react`. This must run in a client context (e.g. not in a server component):
320+
321+
```js
322+
import { scan } from "react-scan"; // import this BEFORE react
323+
import React from "react";
324+
325+
if (typeof window !== "undefined") {
326+
scan({
327+
enabled: true,
328+
log: true, // logs render info to console (default: false)
329+
});
330+
}
331+
```
332+
333+
> Looking for [React Native](https://github.com/aidenybai/react-scan/pull/23)?
334+
163335
## API Reference
164336

165337
<details>
@@ -248,9 +420,9 @@ export interface Options {
248420
*
249421
* @default "fast"
250422
*/
251-
animationSpeed?: 'slow' | 'fast' | 'off';
423+
animationSpeed?: "slow" | "fast" | "off";
252424

253-
/**
425+
/**
254426
* Smoothly animate the re-render outline when the element moves
255427
*
256428
* @default true
@@ -297,7 +469,7 @@ However, this makes it easy to accidentally cause unnecessary renders, making th
297469
This often comes down to props that update in reference, like callbacks or object values. For example, the `onClick` function and `style` object are re-created on every render, causing `ExpensiveComponent` to slow down the app:
298470

299471
```jsx
300-
<ExpensiveComponent onClick={() => alert('hi')} style={{ color: 'purple' }} />
472+
<ExpensiveComponent onClick={() => alert("hi")} style={{ color: "purple" }} />
301473
```
302474

303475
React Scan helps you identify these issues by automatically detecting and highlighting renders that cause performance issues. Now, instead of guessing, you can see exactly which components you need to fix.

0 commit comments

Comments
 (0)