@meui-creative/dev-tools
Advanced tools
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing.
bun add @meui-creative/dev-tools
# or
npm install @meui-creative/dev-tools
// app/layout.tsx nebo kdekoli
import { DevTools } from '@meui-creative/dev-tools'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<DevTools /> {/* Automaticky se skryje v produkci */}
</body>
</html>
)
}
// app/layout.tsx
import { DevToolsLauncher } from '@meui-creative/dev-tools'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<DevToolsLauncher>
{children}
</DevToolsLauncher>
</body>
</html>
)
}
// App.tsx
import { DevTools } from '@meui-creative/dev-tools'
function App() {
return (
<div>
<YourApp />
<DevTools /> {/* Žádná podmínka není potřeba! */}
</div>
)
}
import { DevToolsManual, useDevTools } from '@meui-creative/dev-tools'
function MyApp() {
const { isOpen, toggle } = useDevTools()
return (
<>
<YourApp />
<button onClick={toggle}>Toggle DevTools</button>
<DevToolsManual isOpen={isOpen} onToggle={toggle} />
</>
)
}
import { DevToolsForce } from '@meui-creative/dev-tools'
function App() {
return (
<>
<YourApp />
<DevToolsForce /> {/* Vždy viditelné, i v produkci */}
</>
)
}
import { DevToolsProvider, useDevToolsContext } from '@meui-creative/dev-tools'
function App() {
return (
<DevToolsProvider>
<YourApp />
</DevToolsProvider>
)
}
function SomeComponent() {
const { open, close } = useDevToolsContext()
return (
<button onClick={open}>Open DevTools</button>
)
}
import { withDevTools } from '@meui-creative/dev-tools'
const AppWithDevTools = withDevTools(YourApp)
export default AppWithDevTools
import { DevToolsStandalone } from '@meui-creative/dev-tools'
// Perfect for component testing
function ComponentTest() {
return <DevToolsStandalone url="http://localhost:3000" />
}
Ctrl+Shift+D (or Cmd+Shift+D) - Toggle DevToolsEscape - Close DevToolsDevTools automaticky detekuje development environment a skryje se v produkci. Detekce funguje pomocí:
process.env.NODE_ENV === 'development'?dev=true// Základní - automatické skrytí v produkci
<DevTools />
// Zakázat automatické skrytí
<DevTools hideInProduction={false} />
// Skrýt pomocí URL parametru
// http://localhost:3000?no-dev-tools=true
// Zobrazit pomocí URL parametru v produkci
// https://mysite.com?dev=true
DevTools automatically hides in production and when ?no-dev-tools=true is in the URL.
Full TypeScript support with exported types:
import type {
Device,
LighthouseMetrics,
AccessibilityIssue,
SEOMetrics
} from '@meui-creative/dev-tools'
MIT © MEUI Creative
Issues and PRs welcome! Please read our contributing guidelines.
Made with ❤️ by MEUI Creative
FAQs
Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing
We found that @meui-creative/dev-tools demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.