# react-heads-up-display > [React HUD Demo](https://react-hud.herokuapp.com/) Latest version **0.1.5** (published 2023-03-01) · 0 weekly downloads ## Install ```sh npm install react-heads-up-display pnpm add react-heads-up-display yarn add react-heads-up-display bun add react-heads-up-display ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.5 | | Published | 2023-03-01 | | First published | 2022-03-26 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 79.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | bronz3beard | | Maintainers | bronz3beard | | Keywords | react, HUD, Head Up Display, Feature, View, Video, Images, showcase | ## Links - npm: https://www.npmjs.com/package/react-heads-up-display - Homepage: https://github.com/bronz3beard/react-hud - npm.io page: https://npm.io/package/react-heads-up-display ## Dependencies (9) - [react](https://npm.io/package/react.md) latest - [postcss](https://npm.io/package/postcss.md) latest - [react-dom](https://npm.io/package/react-dom.md) latest - [web-vitals](https://npm.io/package/web-vitals.md) latest - [autoprefixer](https://npm.io/package/autoprefixer.md) latest - [react-scripts](https://npm.io/package/react-scripts.md) latest - [@testing-library/react](https://npm.io/package/@testing-library/react.md) latest - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) latest - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) latest ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.5 (latest) — 2023-03-01 - 0.1.4 — 2022-05-22 - 0.1.3 — 2022-05-21 - 0.1.2 — 2022-05-21 - 0.1.1 — 2022-03-26 - 0.1.0 — 2022-03-26 ## README # React HUD   [![npm version](https://badge.fury.io/js/react-heads-up-display.svg)](https://badge.fury.io/js/react-heads-up-display) [React HUD Demo](https://react-hud.herokuapp.com/) React HUD will showcase a view (image, video, carousel, whatever you want) on your website, with multiple action points overlaying the display. ---- # PR's - Have a look at the [PR template doc](https://github.com/bronz3beard/react-hud/blob/master/docs/pull_request_template.md) for best approach to getting your pr merged. ---- # Usage ```js import { ReactHUD } from "react-heads-up-display"; const App = () => { ... ; return ( ) } ``` ---- # PropTypes ```js ReactHUD.defaultProps = { topLeftClass: 'absolute top-0 left-0 z-10', topMiddleClass: 'absolute top-0 left-1/2 transform -translate-x-1/2 z-10', topRightClass: 'absolute top-0 right-0 z-10', centreLeftClass: 'absolute top-1/2 left-0 -translate-y-1/2 z-10', centreMiddleClass: 'absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10', centreRightClass: 'absolute top-1/2 right-0 -translate-y-1/2 z-10', bottomLeftClass: 'absolute bottom-0 left-0 z-10', bottomMiddleClass: 'absolute bottom-0 lg:left-1/2 lg:transform lg:-translate-x-1/2 z-10 lg:w-2/5 w-full', bottomRightClass: 'absolute lg:bottom-0 bottom-2 right-0 z-10', displayMiddleClass: 'absolute w-full h-full z-0', hudClass: 'relative flex items-center justify-center h-full w-full bg-black m-0 p-0', hudContainerClass: 'absolute inset-0 m-0 p-0 h-full max-h-full w-full', hasFullScreen: { topLeft: false, topMiddle: false, topRight: false, centreLeft: false, centreMiddle: false, centreRight: false, bottomLeft: false, bottomMiddle: false, bottomRight: false }, }; ReactHUD.propTypes = { topLeft: node, topMiddle: node, topRight: node, centreLeft: node, centreMiddle: node, centreRight: node, bottomLeft: node, bottomMiddle: node, bottomRight: node, displayMiddle: node, topLeftClass: string, topMiddleClass: string, topRightClass: string, centreLeftClass: string, centreMiddleClass: string, centreRightClass: string, bottomLeftClass: string, bottomMiddleClass: string, bottomRightClass: string, displayMiddleClass: string, hudClass: string, hudContainerClass: string, hasFullScreen: shape({ topLeft: bool, topMiddle: bool, topRight: bool, centreLeft: bool, centreMiddle: bool, centreRight: bool, bottomLeft: bool, bottomMiddle: bool, bottomRight: bool }), }; ``` ---- # Available Properties ---- # Styling Properties All styling is controlled by tailwind and you can override any part of the HUD, by adding any of the following props. ```js topLeftClass: string, topMiddleClass: string, topRightClass: string, centreLeftClass: string, centreMiddleClass: string, centreRightClass: string, bottomLeftClass: string, bottomMiddleClass: string, bottomRightClass: string, displayMiddleClass: string, hudClass: string, hudContainerClass: string, ``` ---- # Create React App - This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). --- _Source: https://npm.io/package/react-heads-up-display · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._