React component for faster and simpler web development.
DEPREACTED F3M-Sticky-Top-Bar is available as an [npm package](npm i f3m-sticky-top-bar).
// with npm
npm i f3m-sticky-top-bar
Here is a quick example to get you started, it's all you need:
import * as React from "react";
import F3MStickyTopBar from "f3m-sticky-top-bar";
function App() {
return <F3MStickyTopBar keyArea="Link2"></F3MStickyTopBar>;
}
ReactDOM.render(<App />, document.querySelector("#app"));| 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
|
Who Cares.
|
| isHealthiPatientSummaryActive |
Insert the elements of the Healthi Patient's Summary. (isHealthiPatientSummaryActive value has to be "false").
boolean
|
true |
| 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 | squidOldMan@nflx.pt
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
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 |
Yes, it's really all you need to get started! Try it in: [CodeSandbox](https://codesandbox.io/)
No License. "(...) nobody else can copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation."