f3m-top-bar

F3M-Top-Bar

React component for faster and simpler web development.

Installation

F3M-Top-Bar is available as an [npm package](npm i f3m-top-bar).

// with npm
npm i f3m-top-bar

Usage

Here is a quick example to get you started, it's all you need:

import * as React from "react";
import F3MTopBar from "f3m-top-bar";

function App() {
  return <F3MTopBar keyArea="Link2"></F3MTopBar>;
}

ReactDOM.render(<App />, document.querySelector("#app"));

Props

Name	Description	Default
barPosition	CSS position of the bar. 'absolute' | 'sticky'	'absolute'
headerContainerClasses	Classes of the header container. String	-
summaryContent	Insert elements in the Summary. React.ReactNode	<> {healthiBadgePatientPhoto} {healthiPatientNickname} ({healthiPatientAge}) {healthiPatientName} SNS: {healthiPatientSNS} {healthiPatientEntity} | Diagnóstico Principal: Ataque Isquêmico Transitó... Gestor de Caso: Tânia Palma | C. Emergência: 933 333 333 {episodes.map((option) => ( {option.value} ))} {patientBadges}
isHealthiPatientSummaryActive	Insert the elements of the Healthi Patient's Summary. (isHealthiPatientSummaryActive value has to be "false"). boolean	false
healthiBadgePatientPhoto	Insert badge in the PatientPhoto (isHealthiPatientSummaryActive value has to be "true". React.ReactNode	Inativo ,
healthiPatientPhoto	Insert patient photo (isHealthiPatientSummaryActive value has to be "true"). string	'https://www.looper.com/img/gallery/why-did-the-old-man-play-in-squid-game/l-intro-1633465995.jpg',
healthiHandleErrorImg	Handle error of the patient photo (isHealthiPatientSummaryActive value has to be "true"). () => void	-
healthiPatientName	Insert patient name (isHealthiPatientSummaryActive value has to be "true"). string	'José Pereira Andrade'
healthiPatientAge	Insert patient age (isHealthiPatientSummaryActive value has to be "true"). string	'92 anos'
healthiPatientSNS	Insert patient SNS (isHealthiPatientSummaryActive value has to be "true"). string	'001'
healthiPatientEntity	Insert patient entity (isHealthiPatientSummaryActive value has to be "true"). string	'Por definir'
healthiReportIcon	Insert report icon (isHealthiPatientSummaryActive value has to be "true"). React.ReactNode
detailsContentOne	Insert elements in the first section of details. React.ReactNode	Nacionalidade Portuguesa Nº de Beneficiário 001 | 20/08/2025 Contatos 918804958 | [e-mail] CESD 00000000012345678914
detailsContentSecond	Insert elements in the second section of details. React.ReactNode	<> Benefícios R Beneficiários do Complemento Solidário para Idosos (BAS) O Doentes crónicos com guia Regimes de Exceção Vítimas de Incêndio | Início: 01/12/2016
detailsContentThird	Insert elements in the third section of details. React.ReactNode	<> Alergias Sem alergias.
isDashedBoardSecondContentInserted	Insert dashed board between first and second detail section. boolean	true
isDashedBoardThirdContentInserted	Insert dashed board between second and third detail section. boolean	true
healthiPatientNickname	Insert patient nickname. string	'Zé Andrade'
patientBadges	Insert badges of the problems that patient's have. React.ReactNode	<> 1 2 3 4 5

Yes, it's really all you need to get started! Try it in: [CodeSandbox](https://codesandbox.io/)

License

No License. "(...) nobody else can copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation."