{"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.","language":"javascript","status":"active","last_verified":"Mon Apr 27","install":{"commands":["npm install react-typescript-flight-indicators"],"cli":null},"imports":["import { Airspeed } from 'react-typescript-flight-indicators'","import { Altimeter } from 'react-typescript-flight-indicators'","import { AttitudeIndicator } from 'react-typescript-flight-indicators'","import { HeadingIndicator } from 'react-typescript-flight-indicators'","import { TurnCoordinator } from 'react-typescript-flight-indicators'","import { Variometer } from 'react-typescript-flight-indicators'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}