{"id":13492840,"url":"https://github.com/tannerlinsley/react-query-devtools","last_synced_at":"2025-03-28T11:30:51.229Z","repository":{"id":55412252,"uuid":"244937370","full_name":"tannerlinsley/react-query-devtools","owner":"tannerlinsley","description":"⚛️ Devtools for React Query","archived":true,"fork":false,"pushed_at":"2021-01-01T20:46:40.000Z","size":2580,"stargazers_count":990,"open_issues_count":0,"forks_count":46,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-31T07:34:01.677Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tannerlinsley.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"tannerlinsley","custom":"https://youtube.com/tannerlinsley"}},"created_at":"2020-03-04T15:36:21.000Z","updated_at":"2024-09-04T05:31:27.000Z","dependencies_parsed_at":"2022-08-14T23:50:21.655Z","dependency_job_id":null,"html_url":"https://github.com/tannerlinsley/react-query-devtools","commit_stats":null,"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerlinsley%2Freact-query-devtools","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerlinsley%2Freact-query-devtools/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerlinsley%2Freact-query-devtools/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tannerlinsley%2Freact-query-devtools/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tannerlinsley","download_url":"https://codeload.github.com/tannerlinsley/react-query-devtools/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246020770,"owners_count":20710818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:09.765Z","updated_at":"2025-03-28T11:30:50.477Z","avatar_url":"https://github.com/tannerlinsley.png","language":"JavaScript","readme":"# DEPRECATED\n\nThis repo and package has been deprecated in favor of the new [built-in devtools](https://react-query.tanstack.com/devtools) that ship with React Query v3. This repo will remain here for people still using v2.\n\n# Documentation\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Floating Mode](#floating-mode)\n  - [Embedded Mode](#embedded-mode)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# Installation\n\n```bash\n$ npm i --save react-query-devtools\n# or\n$ yarn add react-query-devtools\n```\n\nUsing React Native? Try [react-query-native-devtools](https://github.com/bgaleotti/react-query-native-devtools) instead.\n\n# Usage\n\nBy default, React Query Devtools are not imported and used when `process.env.NODE_ENV === 'production'`, so you don't need to worry about excluding them during a production build.\n\nIf you want to use the devtools in production, you can manually import them (preferably asynchronously code-split) by importing the `dist/react-query-devtools.production.min.js` file directly.\n\n## Floating Mode\n\nFloating Mode will mount the devtools as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads.\n\nPlace the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!\n\n```js\nimport { ReactQueryDevtools } from 'react-query-devtools'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* The rest of your application */}\n      \u003cReactQueryDevtools initialIsOpen={false} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Options\n\n- `initialIsOpen: Boolean`\n  - Set this `true` if you want the dev tools to default to being open\n- `panelProps: PropsObject`\n  - Use this to add props to the panel. For example, you can add `className`, `style` (merge and override default style), etc.\n- `closeButtonProps: PropsObject`\n  - Use this to add props to the close button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.\n- `toggleButtonProps: PropsObject`\n  - Use this to add props to the toggle button. For example, you can add `className`, `style` (merge and override default style), `onClick` (extend default handler), etc.\n- `position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"`\n  - Defaults to `bottom-left`\n  - The position of the React Query logo to open and close the devtools panel\n\n## Embedded Mode\n\nEmbedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!\n\n```js\nimport { ReactQueryDevtoolsPanel } from 'react-query-devtools'\n\nfunction App() {\n  return (\n    \u003c\u003e\n      {/* The rest of your application */}\n      \u003cReactQueryDevtoolsPanel style={styles} className={className} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n### Options\n\nUse these options to style the dev tools.\n\n- `style: StyleObject`\n  - The standard React style object used to style a component with inline styles\n- `className: string`\n  - The standard React className property used to style a component with classes\n\n\u003c!--  --\u003e\n","funding_links":["https://github.com/sponsors/tannerlinsley","https://youtube.com/tannerlinsley"],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects","Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftannerlinsley%2Freact-query-devtools","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftannerlinsley%2Freact-query-devtools","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftannerlinsley%2Freact-query-devtools/lists"}