diff --git a/docs/framework/react/basic-setup.md b/docs/framework/react/basic-setup.md new file mode 100644 index 00000000..945ba174 --- /dev/null +++ b/docs/framework/react/basic-setup.md @@ -0,0 +1,78 @@ +--- +title: Basic setup +id: basic-setup +--- + +TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel. + +## Setup + +Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/react-devtools) library, this will install the devtools core as well as provide you framework specific adapters. + +```bash +npm i @tanstack/react-devtools +``` + +Next in the root of your application import the `TanstackDevtools` from the required framework adapter (in this case @tanstack/react-devtools). + +```tsx +import { TanstackDevtools } from '@tanstack/react-devtools' + +import App from './App' + +createRoot(document.getElementById('root')!).render( + + + + + , +) +``` + +Import the desired devtools and provide it to the `TanstackDevtools` component along with a label for the menu. + +Currently TanStack offers: + +- `QueryDevtools` +- `RouterDevtools` +- `FormDevtools` + +```tsx +import { createRoot } from 'react-dom/client' + +import { TanstackDevtools } from '@tanstack/react-devtools' + +import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools' +import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools' +import { ReactFormDevtoolsPanel } from '@tanstack/react-form' + + +import App from './App' + +createRoot(document.getElementById('root')!).render( + + + + , + }, + { + name: 'Tanstack Router', + render: , + }, + { + name: 'Tanstack Form', + render: , + }, + ]} + /> + , +) +``` + +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. + +A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/react/examples). diff --git a/docs/framework/solid/basic-setup.md b/docs/framework/solid/basic-setup.md new file mode 100644 index 00000000..a8c37dd7 --- /dev/null +++ b/docs/framework/solid/basic-setup.md @@ -0,0 +1,73 @@ +--- +title: Basic setup +id: basic-setup +--- + +TanStack devtools provides you with an easy to use and modular client that allows you to compose multiple devtools into one easy to use panel. + +## Setup + +Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/solid-devtools) library, this will install the devtools core as well as provide you framework specific adapters. + +```bash +npm i @tanstack/solid-devtools +``` + +Next in the root of your application import the `TanstackDevtools` from the required framework adapter (in this case @tanstack/solid-devtools). + +```tsx +import { TanstackDevtools } from '@tanstack/solid-devtools' + +import App from './App' + +createRoot(document.getElementById('root')!).render( + + + + + , +) +``` + +Import the desired devtools and provide it to the `TanstackDevtools` component along with a label for the menu. + +Currently TanStack offers: + +- `QueryDevtools` +- `RouterDevtools` +- `FormDevtools` + +```tsx +import { render } from 'solid-js/web'; + +import { TanstackDevtools } from '@tanstack/solid-devtools' + +import { SolidQueryDevtoolsPanel } from '@tanstack/solid-query-devtools' +import { TanStackRouterDevtoolsPanel } from '@tanstack/solid-router-devtools' +import { SolidFormDevtoolsPanel } from '@tanstack/solid-form' + +import App from './App' + +render(() => ( + <> + + + , + }, + { + name: 'Tanstack Form', + render: () => , + }, + ]} + /> + +), document.getElementById('root')!); +``` + +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. + +A complete working example can be found in our [examples section](https://tanstack.com/devtools/latest/docs/framework/solid/examples). diff --git a/docs/framework/solid/guides/adapter.md b/docs/framework/solid/guides/adapter.md index a85c6855..d9909074 100644 --- a/docs/framework/solid/guides/adapter.md +++ b/docs/framework/solid/guides/adapter.md @@ -1,8 +1,16 @@ --- title: TanStack Devtools Solid Adapter -ref: docs/framework/react/adapter.md -replace: { - "React": "Solid", - "react": "solid" -} +ref: adapter --- + +If you are using TanStack Devtools in a Solid application, we recommend using the Solid Adapter. The Solid Adapter provides a set of easy-to-use hooks on top of the core Devtools utilities. If you find yourself wanting to use the core Devtools classes/functions directly, the Solid Adapter will also re-export everything from the core package. + +## Installation + +```sh +npm install @tanstack/solid-devtools +``` + +## Solid Hooks + +TODO diff --git a/docs/guides/example-guide.md b/docs/guides/example-guide.md deleted file mode 100644 index 0a886e70..00000000 --- a/docs/guides/example-guide.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Example Guide -id: example-guide ---- diff --git a/examples/react/basic/src/index.tsx b/examples/react/basic/src/index.tsx index a08f1873..3cc84919 100644 --- a/examples/react/basic/src/index.tsx +++ b/examples/react/basic/src/index.tsx @@ -1,4 +1,4 @@ -import ReactDOM from 'react-dom/client' +import { createRoot } from 'react-dom/client' import Devtools from './setup' import { queryPlugin } from './plugin' setTimeout(() => { @@ -21,5 +21,5 @@ function App() { ) } -const root = ReactDOM.createRoot(document.getElementById('root')!) +const root = createRoot(document.getElementById('root')!) root.render()