Skip to content

Commit a9bbb93

Browse files
aidenybaiaidenybai
committed
init
1 parent 2c1be5b commit a9bbb93

File tree

9 files changed

+275
-44
lines changed

9 files changed

+275
-44
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ module.exports = {
99
require.resolve('@vercel/style-guide/eslint/browser'),
1010
require.resolve('@vercel/style-guide/eslint/typescript'),
1111
],
12-
ignorePatterns: ['**/dist/*'],
12+
ignorePatterns: ['**/dist/*', '**/test/*'],
1313
parserOptions: {
1414
project,
1515
},

‎.github/assets/demo.gif‎

2.5 MB
Loading

‎.github/assets/logo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎README.md‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,43 @@
1-
# react-scan
1+
# <img src="https://react-scan.million.dev/logo.svg" /> React Scan
22

3-
React Scan highlights problematic renders in your React app.
3+
React Scan detects performance issues in your React app.
44

5-
Scan your React app for renders
5+
Previously, tools like [<Profiler />](https://react.dev/reference/react-devtools), [Why Did You Render?](https://github.com/welldone-software/why-did-you-render), and [React Devtools](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) required lots of manual code change, lacked simple visual cues, and had a high noise-to-signal ratio.
66

7-
- [ ] add video demos
8-
- [ ] add live demos
7+
React Scan fixes this by automatically detecting and highlighting the components that are causing performance issues. This filters out the noise and focuses on the signal.
8+
9+
It's also just JavaScript, so you drop it in anywhere – script tag, npm, you name it!
10+
11+
[**Try it out! →**](https://react-scan.million.dev)
912

1013
## Install
1114

12-
**Install via npm**
15+
The simplest way to use it is to add this script to your app:
16+
17+
```html
18+
<!-- import this BEFORE any scripts -->
19+
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
20+
```
21+
22+
Or, if you prefer, install via npm:
1323

1424
```bash
1525
npm install react-scan
1626
```
1727

18-
```js
19-
// import this BEFORE react and react-dom
20-
import { scan } from 'react-scan';
21-
scan();
22-
```
28+
Then, in your app, import this **BEFORE** `react`:
2329

24-
**Install via script tag**
30+
```js
31+
import { scan } from 'react-scan'; // import this BEFORE react
32+
import React from 'react';
2533

26-
```html
27-
<!-- import this BEFORE any scripts -->
28-
<script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
34+
scan({
35+
enabled: true,
36+
log: true, // logs render info to console
37+
});
2938
```
3039

31-
## Live demo
40+
> Looking for a more advanced version? Check out [Million Lint](https://million.dev)!
3241
3342
## How does it work?
3443

‎test/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<!-- <link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
78
<link
9+
href="https://fonts.googleapis.com/css2?family=Geist+Mono:[email protected]&family=Geist:[email protected]&display=swap"
810
rel="stylesheet"
9-
href="https://cdn.jsdelivr.net/npm/@exampledev/[email protected]/new.min.css"
10-
/> -->
11-
<title>react-scan demo</title>
11+
/>
12+
<link rel="icon" href="/logo.svg" type="image/svg+xml" />
13+
<title>react-scan</title>
1214
</head>
1315
<body>
1416
<div id="root"></div>
15-
<!-- <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script> -->
1617
<script type="module" src="./src/index.jsx"></script>
1718
</body>
1819
</html>

‎test/public/logo.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎test/src/index.jsx‎

Lines changed: 86 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { scan } from 'react-scan/dist/index.mjs'; // force production build
12
import React, { useState } from 'react';
23
import ReactDOMClient from 'react-dom/client';
3-
import { scan } from 'react-scan';
4+
import './styles.css';
45

56
scan({
67
enabled: true,
@@ -12,17 +13,85 @@ export const App = () => {
1213
const [tasks, setTasks] = useState([]);
1314

1415
return (
15-
<div>
16-
<AddTask
17-
onCreate={(value) => {
18-
if (!value) return;
19-
setTasks([...tasks, value]);
20-
}}
21-
/>
22-
<TaskList
23-
tasks={tasks}
24-
onDelete={(value) => setTasks(tasks.filter((task) => task !== value))}
25-
/>
16+
<div className="app-container">
17+
<div className="main-content">
18+
<nav className="navbar">
19+
<a href="/" className="navbar-brand">
20+
<img src="/logo.svg" alt="react-scan-logo" width="30" height="30" />
21+
<h3>
22+
<strong>React Scan</strong>
23+
</h3>
24+
</a>
25+
<div className="navbar-links">
26+
<a
27+
href="https://github.com/aidenybai/react-scan#readme"
28+
className="navbar-link"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
>
32+
install
33+
</a>
34+
<a
35+
href="https://github.com/aidenybai/react-scan"
36+
className="navbar-link"
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
>
40+
github
41+
</a>
42+
</div>
43+
</nav>
44+
45+
<p>
46+
React Scan "scans" your React app for problematic renders. It's just
47+
JavaScript, so you drop it in anywhere – script tag, npm, you name it!
48+
</p>
49+
50+
<div className="task-section">
51+
<p>Try interacting with this input to see it in action:</p>
52+
<AddTask
53+
onCreate={(value) => {
54+
if (!value) return;
55+
setTasks([...tasks, value]);
56+
}}
57+
/>
58+
<TaskList
59+
tasks={tasks}
60+
onDelete={(value) =>
61+
setTasks(tasks.filter((task) => task !== value))
62+
}
63+
/>
64+
</div>
65+
</div>
66+
67+
<div className="sticky-footer">
68+
<p>Get started by adding this script to your app:</p>
69+
<p>
70+
<code>
71+
&lt;script
72+
src=&quot;https://unpkg.com/react-scan/dist/auto.global.js&quot;&gt;&lt;/script&gt;
73+
</code>
74+
</p>
75+
<p>
76+
<small>
77+
<strong>Important:</strong> Add this before any other scripts run!
78+
</small>
79+
</p>
80+
<a
81+
href="https://github.com/aidenybai/react-scan#readme"
82+
className="cta-button"
83+
>
84+
View source →
85+
</a>
86+
<p>
87+
<small>
88+
Psst... need something more advanced? Check out:{' '}
89+
<a href="https://million.dev" className="navbar-link">
90+
Million Lint
91+
</a>
92+
</small>
93+
</p>
94+
</div>
2695
</div>
2796
);
2897
};
@@ -39,13 +108,7 @@ export const TaskList = ({ tasks, onDelete }) => {
39108

40109
export const TaskItem = ({ task, onDelete }) => {
41110
return (
42-
<li
43-
style={{
44-
display: 'flex',
45-
paddingTop: '1rem',
46-
gap: '1rem',
47-
}}
48-
>
111+
<li className="task-item">
49112
{task}
50113
<Button onClick={() => onDelete(task)}>Delete</Button>
51114
</li>
@@ -68,7 +131,7 @@ export const AddTask = ({ onCreate }) => {
68131
const [value, setValue] = useState('');
69132
const [id, setId] = useState(0);
70133
return (
71-
<div style={{ display: 'flex', padding: '0.5rem' }}>
134+
<div className="add-task-container">
72135
<Input
73136
onChange={(value) => setValue(value)}
74137
onEnter={(value) => {
@@ -84,7 +147,7 @@ export const AddTask = ({ onCreate }) => {
84147
setValue('');
85148
}}
86149
>
87-
Create
150+
Add Task
88151
</Button>
89152
</div>
90153
);
@@ -94,6 +157,8 @@ export const Input = ({ onChange, onEnter, value }) => {
94157
return (
95158
<input
96159
type="text"
160+
className="input"
161+
placeholder="Today I will..."
97162
onChange={(e) => onChange(e.target.value)}
98163
onKeyDown={(e) => {
99164
if (e.key === 'Enter') {

0 commit comments

Comments
 (0)