File tree Expand file tree Collapse file tree 4 files changed +41
-49
lines changed Expand file tree Collapse file tree 4 files changed +41
-49
lines changed Original file line number Diff line number Diff line change @@ -72,7 +72,6 @@ npm install @tanstack/devtools # no framework, just vanilla js
72
72
## Usage
73
73
74
74
### React
75
-
76
75
77
76
``` tsx
78
77
import { TanstackDevtools } from ' @tanstack/react-devtools'
@@ -83,23 +82,22 @@ function App() {
83
82
return (
84
83
<div >
85
84
<h1 >My App</h1 >
86
- <TanstackDevtools
87
- plugins = { [
88
- {
89
- name: ' Tanstack Query' ,
90
- render: <ReactQueryDevtoolsPanel />,
91
- },
92
- {
93
- name: ' Tanstack Router' ,
94
- render: <TanStackRouterDevtoolsPanel router = { router } />,
95
- },
96
- ]}
97
- />
85
+ <TanstackDevtools
86
+ plugins = { [
87
+ {
88
+ name: ' Tanstack Query' ,
89
+ render: <ReactQueryDevtoolsPanel />,
90
+ },
91
+ {
92
+ name: ' Tanstack Router' ,
93
+ render: <TanStackRouterDevtoolsPanel router = { router } />,
94
+ },
95
+ ]}
96
+ />
98
97
</div >
99
98
)
100
99
}
101
-
102
- ```
100
+ ```
103
101
104
102
## Development
105
103
Original file line number Diff line number Diff line change @@ -6,7 +6,6 @@ This package is still under active development and might have breaking changes i
6
6
7
7
``` tsx
8
8
import { TanStackDevtoolsCore } from ' @tanstack/devtools'
9
-
10
9
11
10
const devtools = new TanStackDevtoolsCore ({
12
11
options: {
@@ -18,7 +17,6 @@ const devtools = new TanStackDevtoolsCore({
18
17
})
19
18
20
19
devtools .mount (document .getElementById (' your-devtools-container' )! )
21
-
22
20
```
23
21
24
22
## Creating plugins
@@ -36,10 +34,8 @@ const devtools = new TanStackDevtoolsCore({
36
34
{
37
35
id: ' my-plugin' ,
38
36
name: ' My Plugin' ,
39
- render : (el ) => el .innerHTML = ' <div>My Plugin Content</div>' ,
40
- }
41
- ]
37
+ render : (el ) => ( el .innerHTML = ' <div>My Plugin Content</div>' ) ,
38
+ },
39
+ ],
42
40
})
43
-
44
41
```
45
-
Original file line number Diff line number Diff line change 1
- ## Usage
1
+ ## Usage
2
2
3
3
``` tsx
4
4
import { TanstackDevtools } from ' @tanstack/react-devtools'
@@ -9,20 +9,19 @@ function App() {
9
9
return (
10
10
<div >
11
11
<h1 >My App</h1 >
12
- <TanstackDevtools
13
- plugins = { [
14
- {
15
- name: ' Tanstack Query' ,
16
- render: <ReactQueryDevtoolsPanel />,
17
- },
18
- {
19
- name: ' Tanstack Router' ,
20
- render: <TanStackRouterDevtoolsPanel router = { router } />,
21
- },
22
- ]}
23
- />
12
+ <TanstackDevtools
13
+ plugins = { [
14
+ {
15
+ name: ' Tanstack Query' ,
16
+ render: <ReactQueryDevtoolsPanel />,
17
+ },
18
+ {
19
+ name: ' Tanstack Router' ,
20
+ render: <TanStackRouterDevtoolsPanel router = { router } />,
21
+ },
22
+ ]}
23
+ />
24
24
</div >
25
25
)
26
26
}
27
-
28
- ```
27
+ ```
Original file line number Diff line number Diff line change 1
- ## Usage
1
+ ## Usage
2
2
3
3
``` tsx
4
- import { TanstackDevtools } from ' @tanstack/solid-devtools'
4
+ import { TanstackDevtools } from ' @tanstack/solid-devtools'
5
5
import { TanStackRouterDevtoolsPanel } from ' @tanstack/solid-router-devtools'
6
6
7
7
function App() {
8
8
return (
9
9
<div >
10
10
<h1 >My App</h1 >
11
- <TanstackDevtools
12
- plugins = { [
13
- {
14
- name: ' Tanstack Router' ,
15
- render: <TanStackRouterDevtoolsPanel router = { router } />,
16
- },
17
- ]}
18
- />
11
+ <TanstackDevtools
12
+ plugins = { [
13
+ {
14
+ name: ' Tanstack Router' ,
15
+ render: <TanStackRouterDevtoolsPanel router = { router } />,
16
+ },
17
+ ]}
18
+ />
19
19
</div >
20
20
)
21
21
}
22
-
23
- ```
22
+ ```
You can’t perform that action at this time.
0 commit comments