Registry /
web-framework / react-typescript-flight-indicators
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–223 runs
build_error
glibcnode 18–223 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Airspeed
✓ import { Airspeed } from 'react-typescript-flight-indicators'
✗ import Airspeed from 'react-typescript-flight-indicators'
Named export, not default. Must destructure from the package.
Altimeter
✓ import { Altimeter } from 'react-typescript-flight-indicators'
✗ import { Altimeter } from 'react-typescript-flight-indicators/Altimeter'
All components are re-exported from the index; no subpath imports.
AttitudeIndicator
✓ import { AttitudeIndicator } from 'react-typescript-flight-indicators'
✗ const AttitudeIndicator = require('react-typescript-flight-indicators').AttitudeIndicator
Package is ESM-only (type: module or modern bundler); require not supported.
HeadingIndicator
✓ import { HeadingIndicator } from 'react-typescript-flight-indicators'
Named export available.
TurnCoordinator
✓ import { TurnCoordinator } from 'react-typescript-flight-indicators'
✗ import { TurnCoordinator } from 'react-typescript-flight-indicators/build/TurnCoordinator'
Do not use internal build paths; always import from the package root.
Variometer
✓ import { Variometer } from 'react-typescript-flight-indicators'
✗ import Variometer from 'react-typescript-flight-indicators/Variometer'
Named export, not default.
Renders six flight instruments with useState-driven random dummy values, demonstrating all available components in a flex layout.
import React, { useState } from 'react';
import { Airspeed, Altimeter, AttitudeIndicator, HeadingIndicator, TurnCoordinator, Variometer } from 'react-typescript-flight-indicators';
function FlightPanel() {
const [heading, setHeading] = useState(0);
const [speed, setSpeed] = useState(100);
const [altitude, setAltitude] = useState(5000);
const [roll, setRoll] = useState(0);
const [pitch, setPitch] = useState(0);
const [turn, setTurn] = useState(0);
const [vario, setVario] = useState(0);
return (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
<HeadingIndicator heading={heading} showBox={false} />
<Airspeed speed={speed} showBox={false} />
<Altimeter altitude={altitude} showBox={false} />
<AttitudeIndicator roll={roll} pitch={pitch} showBox={false} />
<TurnCoordinator turn={turn} showBox={false} />
<Variometer vario={vario} showBox={false} />
</div>
);
}
export default FlightPanel;
Errors
Common errors & fixes
Error: Cannot find module 'react-typescript-flight-indicators'
Package not installed or incorrect import path.
fixRun 'npm install react-typescript-flight-indicators' and import using 'import { ... } from "react-typescript-flight-indicators"'. TypeError: HeadingIndicator is not a function
Default import used instead of named import.
fixChange 'import HeadingIndicator from ...' to 'import { HeadingIndicator } from ...' Module '"react-typescript-flight-indicators"' has no exported member 'AttitudeIndicator'. Did you mean to use 'import AttitudeIndicator from "react-typescript-flight-indicators"' instead?
TypeScript cannot resolve the named export; usually due to incorrect bundler configuration or type resolution.
fixEnsure bundler is configured for ESM. If using TypeScript, set 'moduleResolution': 'node16' or 'bundler' in tsconfig.json.
Audit
Dependencies
reactrequiredPeer dependency required for rendering components; version ^18.0.0 required.