You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`panelLocation` - The location of the devtools panel
38
38
39
39
```ts
40
-
{panelLocation: 'top'|'bottom'}
40
+
{panelLocation: 'top'|'bottom'}
41
41
42
42
```
43
43
@@ -47,40 +47,40 @@ The `config` object is mainly focused around user interaction with the devtools
47
47
typeModifierKey='Alt'|'Control'|'Meta'|'Shift';
48
48
typeKeyboardKey=ModifierKey| (string& {});
49
49
50
-
{openHotkey: Array<KeyboardKey>}
50
+
{openHotkey: Array<KeyboardKey>}
51
51
```
52
52
53
53
-`requireUrlFlag` - Requires a flag present in the url to enable devtools
54
54
55
55
```ts
56
-
{requireUrlFlag: boolean}
56
+
{requireUrlFlag: boolean}
57
57
58
58
```
59
59
60
60
-`urlFlag` - The required flag that must be present in the url to enable devtools.
61
61
62
62
```ts
63
-
{urlFlag: string}
63
+
{urlFlag: string}
64
64
```
65
65
66
66
The `eventBusConfig` is configuration for the back bone of the devtools, the ``, and accepts the following properties:
67
67
68
68
-`debug` - Enables debug mode for the EventBus
69
69
70
70
```ts
71
-
{debug: boolean}
71
+
{debug: boolean}
72
72
```
73
73
74
74
-`connectToServerBus` - Optional flag to indicate if the devtools server event bus is available to connect to
75
75
76
76
```ts
77
-
{connectToServerBus: boolean}
77
+
{connectToServerBus: boolean}
78
78
```
79
79
80
80
-`port` - The port at which the client connects to the devtools server event bus
81
81
82
82
```ts
83
-
{port: number}
83
+
{port: number}
84
84
```
85
85
86
86
Put together here is an example in react:
@@ -148,4 +148,4 @@ class customEventClient extends EventClient<EventMap> {
148
148
}
149
149
```
150
150
151
-
More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic)
151
+
More information about EventClient configuration can be found in our [custom-plugins example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools)
Finally add any additional configuration you desire to the `TanstackDevtools` component, more information can be found under the [TanStack Devtools Configuration](https://tanstack.com/devtools/) section.
76
+
Finally add any additional configuration you desire to the `TanstackDevtools` component, more information can be found under the [TanStack Devtools Configuration](../../configuration.md) section.
77
77
78
-
A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/react/examples).
78
+
A complete working example can be found in our [basic example](https://tanstack.com/devtools/latest/docs/framework/react/examples/basic).
Copy file name to clipboardExpand all lines: docs/framework/react/guides/custom-plugins.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -33,7 +33,7 @@ export function createCounter() {
33
33
34
34
## Event Client Setup
35
35
36
-
Install the [TanStack Devtools Event Client](https://tanstack.com/devtools/) utils.
36
+
Install the [TanStack Devtools Event Client](https://www.npmjs.com/package/@tanstack/devtools-event-client) utils.
37
37
38
38
```bash
39
39
npm i @tanstack/devtools-event-client
@@ -67,7 +67,7 @@ export const DevtoolsEventClient = new FormEventClient()
67
67
68
68
## Event Client Integration
69
69
70
-
Now we need to hook our `EventClient` into out application code. This can be done in many way's, a UseEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
70
+
Now we need to hook our `EventClient` into the application code. This can be done in many way's, a useEffect that emits the current state, or a subscription to an observer, all that matters is that when you want to emit the current state you do the following.
71
71
72
72
Our new library code will looks as follows:
73
73
@@ -102,13 +102,13 @@ export function createCounter() {
102
102
}
103
103
```
104
104
105
-
> **Important**`EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
105
+
> [!IMPORTANT]`EventClient` is framework agnostic so this process will be the same regardless of framework or even in vanilla JavaScript.
106
106
107
107
## Consuming The Event Client
108
108
109
109
Now we need to create our devtools panel, for a simple approach write the devtools in the framework that the adapter is, be aware that this will make the plugin framework specific.
110
110
111
-
> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you you can ignore this).
111
+
> Because TanStack is framework agnostic we have taken a more complicated approach that will be explained in coming docs (if framework agnosticism is not a concern to you, you can ignore this).
112
112
113
113
DevtoolsPanel.ts
114
114
```tsx
@@ -134,7 +134,7 @@ export function DevtoolPanel() {
134
134
135
135
## Application Integration
136
136
137
-
This step follows what's shown in [../basic-setup] for a more documented guide go check it out. As well as the complete [custom-plugin example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-plugin) in our examples section.
137
+
This step follows what's shown in [basic-setup](../basic-setup.md) for a more documented guide go check it out. As well as the complete [custom-devtools example](https://tanstack.com/devtools/latest/docs/framework/react/examples/custom-devtools) in our examples section.
0 commit comments