{"id":21864,"library":"react-typescript-flight-indicators","title":"react-typescript-flight-indicators","description":"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.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/starnutoditopo/react-typescript-flight-indicators","tags":["javascript","memoization","react","typescript","flight","indicator","airplane","component","control"],"install":[{"cmd":"npm install react-typescript-flight-indicators","lang":"bash","label":"npm"},{"cmd":"yarn add react-typescript-flight-indicators","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-typescript-flight-indicators","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering components; version ^18.0.0 required.","package":"react","optional":false}],"imports":[{"note":"Named export, not default. Must destructure from the package.","wrong":"import Airspeed from 'react-typescript-flight-indicators'","symbol":"Airspeed","correct":"import { Airspeed } from 'react-typescript-flight-indicators'"},{"note":"All components are re-exported from the index; no subpath imports.","wrong":"import { Altimeter } from 'react-typescript-flight-indicators/Altimeter'","symbol":"Altimeter","correct":"import { Altimeter } from 'react-typescript-flight-indicators'"},{"note":"Package is ESM-only (type: module or modern bundler); require not supported.","wrong":"const AttitudeIndicator = require('react-typescript-flight-indicators').AttitudeIndicator","symbol":"AttitudeIndicator","correct":"import { AttitudeIndicator } from 'react-typescript-flight-indicators'"},{"note":"Named export available.","wrong":"","symbol":"HeadingIndicator","correct":"import { HeadingIndicator } from 'react-typescript-flight-indicators'"},{"note":"Do not use internal build paths; always import from the package root.","wrong":"import { TurnCoordinator } from 'react-typescript-flight-indicators/build/TurnCoordinator'","symbol":"TurnCoordinator","correct":"import { TurnCoordinator } from 'react-typescript-flight-indicators'"},{"note":"Named export, not default.","wrong":"import Variometer from 'react-typescript-flight-indicators/Variometer'","symbol":"Variometer","correct":"import { Variometer } from 'react-typescript-flight-indicators'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { Airspeed, Altimeter, AttitudeIndicator, HeadingIndicator, TurnCoordinator, Variometer } from 'react-typescript-flight-indicators';\n\nfunction FlightPanel() {\n  const [heading, setHeading] = useState(0);\n  const [speed, setSpeed] = useState(100);\n  const [altitude, setAltitude] = useState(5000);\n  const [roll, setRoll] = useState(0);\n  const [pitch, setPitch] = useState(0);\n  const [turn, setTurn] = useState(0);\n  const [vario, setVario] = useState(0);\n\n  return (\n    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>\n      <HeadingIndicator heading={heading} showBox={false} />\n      <Airspeed speed={speed} showBox={false} />\n      <Altimeter altitude={altitude} showBox={false} />\n      <AttitudeIndicator roll={roll} pitch={pitch} showBox={false} />\n      <TurnCoordinator turn={turn} showBox={false} />\n      <Variometer vario={vario} showBox={false} />\n    </div>\n  );\n}\n\nexport default FlightPanel;","lang":"typescript","description":"Renders six flight instruments with useState-driven random dummy values, demonstrating all available components in a flex layout."},"warnings":[{"fix":"Upgrade to React 18 or use the original react-flight-indicators (which supports older React).","message":"Requires React 18 as peer dependency. Using with React <18 will cause runtime errors due to dependency resolution.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set showBox to false for production. If you need a border, use CSS instead.","message":"The 'showBox' prop is likely intended for debug styling; its default/behavior may change in future versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Always provide a valid number for each instrument's main prop (heading, speed, altitude, etc.). Use fallback: heading={headingValue ?? 0}.","message":"All props are required (no defaults) and only accept number values. Passing undefined, null, or strings will cause rendering issues or TypeScript errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project uses ESM or a bundler that can transpile ESM imports. For Node.js, set \"type\": \"module\" in package.json.","message":"The package is ESM-only and will not work in CommonJS environments without a bundler that supports ESM (e.g., Webpack, Vite).","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run 'npm install react-typescript-flight-indicators' and import using 'import { ... } from \"react-typescript-flight-indicators\"'.","cause":"Package not installed or incorrect import path.","error":"Error: Cannot find module 'react-typescript-flight-indicators'"},{"fix":"Change 'import HeadingIndicator from ...' to 'import { HeadingIndicator } from ...'","cause":"Default import used instead of named import.","error":"TypeError: HeadingIndicator is not a function"},{"fix":"Ensure bundler is configured for ESM. If using TypeScript, set 'moduleResolution': 'node16' or 'bundler' in tsconfig.json.","cause":"TypeScript cannot resolve the named export; usually due to incorrect bundler configuration or type resolution.","error":"Module '\"react-typescript-flight-indicators\"' has no exported member 'AttitudeIndicator'. Did you mean to use 'import AttitudeIndicator from \"react-typescript-flight-indicators\"' instead?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}