React HUD npm version

PR's

Usage

import { ReactHUD } from "react-heads-up-display";
const App = () => {
 ...
;
 return (
 <ReactHUD
 topLeft={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 topMiddle={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 topRight={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 centreLeft={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 centreMiddle={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 centreRight={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 bottomLeft={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 bottomMiddle={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 bottomRight={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 displayMiddle={{} | ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined}
 topLeftClass=""
 topMiddleClass=""
 topRightClass=""
 centreLeftClass=""
 centreMiddleClass=""
 centreRightClass=""
 bottomLeftClass=""
 bottomMiddleClass=""
 bottomRightClass=""
 displayMiddleClass=""
 hudClass=""
 hudContainerClass=""
 hasFullScreen={
 topLeft: boolean,
 topMiddle: boolean,
 topRight: boolean,
 centreLeft: boolean,
 centreMiddle: boolean,
 centreRight: boolean,
 bottomLeft: boolean,
 bottomMiddle: boolean,
 bottomRight: boolean
 }
 />
 )
}

PropTypes

 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

 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