react-typescript-flight-indicators

1.0.4 verified Mon Apr 27 auth: no javascript

A React + TypeScript port of react-flight-indicators providing SVG-based flight instrument gauges including attitude indicator, heading, airspeed, altimeter, vertical speed, and variometer. Ships with TypeScript definitions and requires React 18+. Version 1.0.4 is the current stable release. Unlike the original jQuery or plain React versions, this package is fully typed and optimized for TypeScript projects, leveraging SVGR for scalable vector graphics. Peer dependency is react ^18.0.0, with no other runtime dependencies.

Common errors

error Error: Cannot find module 'react-typescript-flight-indicators' ↓

cause Package not installed or incorrect import path.

fix

Run 'npm install react-typescript-flight-indicators' and import using 'import { ... } from "react-typescript-flight-indicators"'.

error TypeError: HeadingIndicator is not a function ↓

cause Default import used instead of named import.

fix

Change 'import HeadingIndicator from ...' to 'import { HeadingIndicator } from ...'

error Module '"react-typescript-flight-indicators"' has no exported member 'AttitudeIndicator'. Did you mean to use 'import AttitudeIndicator from "react-typescript-flight-indicators"' instead? ↓

cause TypeScript cannot resolve the named export; usually due to incorrect bundler configuration or type resolution.

fix

Ensure bundler is configured for ESM. If using TypeScript, set 'moduleResolution': 'node16' or 'bundler' in tsconfig.json.

Warnings

breaking Requires React 18 as peer dependency. Using with React <18 will cause runtime errors due to dependency resolution. ↓

fix Upgrade to React 18 or use the original react-flight-indicators (which supports older React).

deprecated The 'showBox' prop is likely intended for debug styling; its default/behavior may change in future versions. ↓

fix Set showBox to false for production. If you need a border, use CSS instead.

gotcha All props are required (no defaults) and only accept number values. Passing undefined, null, or strings will cause rendering issues or TypeScript errors. ↓

fix Always provide a valid number for each instrument's main prop (heading, speed, altitude, etc.). Use fallback: heading={headingValue ?? 0}.

gotcha The package is ESM-only and will not work in CommonJS environments without a bundler that supports ESM (e.g., Webpack, Vite). ↓

fix Ensure your project uses ESM or a bundler that can transpile ESM imports. For Node.js, set "type": "module" in package.json.

Install

npm install react-typescript-flight-indicators

yarn add react-typescript-flight-indicators

pnpm add react-typescript-flight-indicators

Imports

Airspeed

wrong

import Airspeed from 'react-typescript-flight-indicators'

correct

import { Airspeed } from 'react-typescript-flight-indicators'

Named export, not default. Must destructure from the package.

Altimeter

wrong

import { Altimeter } from 'react-typescript-flight-indicators/Altimeter'

correct

import { Altimeter } from 'react-typescript-flight-indicators'

All components are re-exported from the index; no subpath imports.

AttitudeIndicator

wrong

const AttitudeIndicator = require('react-typescript-flight-indicators').AttitudeIndicator

correct

import { AttitudeIndicator } from 'react-typescript-flight-indicators'

Package is ESM-only (type: module or modern bundler); require not supported.

HeadingIndicator

import { HeadingIndicator } from 'react-typescript-flight-indicators'

Named export available.

TurnCoordinator

wrong

import { TurnCoordinator } from 'react-typescript-flight-indicators/build/TurnCoordinator'

correct

import { TurnCoordinator } from 'react-typescript-flight-indicators'

Do not use internal build paths; always import from the package root.

Variometer

wrong

import Variometer from 'react-typescript-flight-indicators/Variometer'

correct

import { Variometer } from 'react-typescript-flight-indicators'

Named export, not default.

Quickstart

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;