react-tech-check

Production-ready React library for pre-call technology diagnostics inspired by Zoom, Google Meet, Agora, and Teams.

Features

• Plug-and-play tech check UI via TechCheck
• Guided step-by-step wizard via TechCheckWizard
• Guided pre-call workflow with progress indicator and final results screen
• Camera verification question with Yes/No response state
• Microphone level verification and speaker test confirmation
• Animated speedometer-style internet speed meter (download, upload, ping, latency)
• Headless hooks for custom UI and workflows
• Network diagnostics: online/offline, latency, jitter, packet-loss estimate, speed tests
• Device diagnostics: camera, microphone, speaker selection and testing
• Browser capability checks for core RTC APIs
• Permission checks with refresh support
• Offline queue helper for resilient workflows
• Auto sequential workflow with progress steps and readiness score
• TypeScript-first with JavaScript compatibility
• SSR-safe behavior and graceful feature degradation
• Tree-shakeable exports

Install

npm install react-tech-check

Quick Start

import { TechCheckWizard } from "react-tech-check";

export function PreCallPage() {
	return (
		<TechCheckWizard
			autoStartSpeedTest
			allowRetry
			onComplete={(result) => {
				console.log("Ready state", result.readyToJoin);
			}}
			theme={{
				primary: "#2563EB",
				success: "#16A34A",
				danger: "#EF4444",
				radius: 12
			}}
		/>
	);
}

Wizard flow:

1. Camera Verification
2. Microphone and Speaker Verification
3. Internet Speed Test
4. Final Readiness Summary

Demo App

A full runnable demo app is available in demo.

Run it from the repository root:

npm install
npm run demo:install
npm run demo:dev

Then open the local URL printed by Vite (usually http://localhost:5173).

Useful demo commands:

npm run demo:build
npm run demo:preview

Headless Example

import {
	useCameraVerification,
	useMicrophoneVerification,
	useInternetSpeed,
	useTechCheckWizard
} from "react-tech-check";

export function CustomPreflight() {
	const camera = useCameraVerification();
	const microphone = useMicrophoneVerification();
	const internet = useInternetSpeed({ unit: "Mbps" });
	const wizard = useTechCheckWizard({ autoStartSpeedTest: false });

	return (
		<div>
			<p>Camera verified: {String(camera.verified)}</p>
			<p>Mic hears test sound: {String(microphone.canHearTestSound)}</p>
			<p>Download: {internet.download ?? "-"} {internet.unit}</p>
			<button onClick={() => void wizard.continueStep()} disabled={!wizard.canContinue}>
				Continue Wizard Step
			</button>
		</div>
	);
}

Exports

Hooks

• useTechCheck
• useTechCheckWizard
• useCameraVerification
• useMicrophoneVerification
• useInternetSpeed
• useNetworkStatus
• useNetwork
• useConnectionQuality
• useSpeedTest
• useCamera
• useMicrophone
• useSpeaker
• usePermissions
• useBrowserSupport
• useOfflineQueue
• useReconnect

Components

• TechCheck
• TechCheckWizard
• CameraVerification
• MicrophoneVerification
• InternetSpeedMeter
• ProgressIndicator
• ResultSummary
• CameraPreview
• MicrophoneMeter
• SpeakerTest
• NetworkStatus
• InternetSpeed
• ConnectionQuality
• PermissionStatus
• ReadinessScore
• TechSummary
• ProgressSteps

Styling and Theming

Default styles are auto-imported from package entrypoint. You can override CSS variables:

• --rtc-primary
• --rtc-success
• --rtc-warning
• --rtc-danger
• --rtc-surface
• --rtc-text
• --rtc-radius

TechCheck also supports direct props for theme customization:

• primaryColor
• successColor
• errorColor
• radius
• showAnimations

TechCheckWizard supports:

• onComplete(result)
• onCancel()
• allowRetry
• autoStartSpeedTest
• stepLabels
• renderers (replace any built-in step while preserving wizard flow)
• readyButtonLabel
• theme

Advanced UI customization:

• texts (override labels, questions, button captions, status text)
• slotClassNames (attach your own classes to root/header/progress/step/footer/button slots)
• slotStyles (inline style overrides per wizard slot)
• renderButton (replace built-in button element)
• renderSelect (replace built-in select element)
• renderRadio (replace built-in radio element)

Development

npm install
npm run lint
npm test
npm run build

Node.js >=18 is required for development tooling and the demo app.

Browser Support

• Chrome, Edge, Brave, Chromium-based browsers
• Firefox (feature support differs for audio output selection)
• Safari (some APIs degrade gracefully)

License

MIT