react-support-ukraine-banner 1.1.9 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -45,6 +45,39 @@ export default App;
|
|
|
45
45
|
```
|
|
46
46
|
Note: Since version 1.1.0, the component is now written in TypeScript and no longer requires importing CSS files separately.
|
|
47
47
|
|
|
48
|
+
## Layout And Header Overlap
|
|
49
|
+
|
|
50
|
+
By default, the banner uses `position: absolute` to stay lightweight and easy to layer.
|
|
51
|
+
If your site has a sticky/fixed header, reserve vertical space for the banner:
|
|
52
|
+
|
|
53
|
+
```jsx
|
|
54
|
+
<SupportUkraineBanner reserveSpace />
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
You can customize the reserved height:
|
|
58
|
+
|
|
59
|
+
```jsx
|
|
60
|
+
<SupportUkraineBanner reserveSpace slotMinHeight={40} />
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
Equivalent manual approach (for older versions):
|
|
64
|
+
|
|
65
|
+
```jsx
|
|
66
|
+
<div style={{ position: 'relative', minHeight: 40 }}>
|
|
67
|
+
<SupportUkraineBanner />
|
|
68
|
+
</div>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Props
|
|
72
|
+
|
|
73
|
+
- `className?: string`
|
|
74
|
+
- `flagClassName?: string`
|
|
75
|
+
- `textClassName?: string`
|
|
76
|
+
- `reserveSpace?: boolean` (default: `false`)
|
|
77
|
+
- `slotMinHeight?: number | string` (default: `40`)
|
|
78
|
+
- `position?: 'absolute' | 'fixed' | 'sticky'` (default: `'absolute'`)
|
|
79
|
+
- `zIndex?: number` (default: `10000`)
|
|
80
|
+
|
|
48
81
|
## Customization
|
|
49
82
|
|
|
50
83
|
The component uses minimal styling to make it easy to customize. You can override the default styles by providing additional classes or style the existing classes in your CSS.
|
|
@@ -3,6 +3,10 @@ type SupportUkraineBannerProps = {
|
|
|
3
3
|
className?: string;
|
|
4
4
|
flagClassName?: string;
|
|
5
5
|
textClassName?: string;
|
|
6
|
+
reserveSpace?: boolean;
|
|
7
|
+
slotMinHeight?: number | string;
|
|
8
|
+
position?: 'absolute' | 'fixed' | 'sticky';
|
|
9
|
+
zIndex?: number;
|
|
6
10
|
};
|
|
7
11
|
declare const SupportUkraineBanner: React.FC<SupportUkraineBannerProps>;
|
|
8
12
|
export default SupportUkraineBanner;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportUkraineBanner.d.ts","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"SupportUkraineBanner.d.ts","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,KAAK,yBAAyB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2F7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,13 +1,47 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
5
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
var react_1 =
|
|
36
|
+
var react_1 = __importStar(require("react"));
|
|
37
|
+
var toCssLength = function (value) {
|
|
38
|
+
return typeof value === 'number' ? "".concat(value, "px") : value;
|
|
39
|
+
};
|
|
7
40
|
var SupportUkraineBanner = function (_a) {
|
|
8
|
-
var className = _a.className, flagClassName = _a.flagClassName, textClassName = _a.textClassName;
|
|
9
|
-
|
|
10
|
-
|
|
41
|
+
var className = _a.className, flagClassName = _a.flagClassName, textClassName = _a.textClassName, _b = _a.reserveSpace, reserveSpace = _b === void 0 ? false : _b, _c = _a.slotMinHeight, slotMinHeight = _c === void 0 ? 40 : _c, _d = _a.position, position = _d === void 0 ? 'absolute' : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 10000 : _e;
|
|
42
|
+
var _f = (0, react_1.useState)(false), isHover = _f[0], setIsHover = _f[1];
|
|
43
|
+
var banner = (react_1.default.createElement("div", { className: className, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); }, onFocusCapture: function () { return setIsHover(true); }, onBlurCapture: function () { return setIsHover(false); }, style: {
|
|
44
|
+
position: position,
|
|
11
45
|
left: 0,
|
|
12
46
|
top: 0,
|
|
13
47
|
right: 0,
|
|
@@ -15,14 +49,36 @@ var SupportUkraineBanner = function (_a) {
|
|
|
15
49
|
display: 'flex',
|
|
16
50
|
justifyContent: 'center',
|
|
17
51
|
padding: '5px',
|
|
18
|
-
zIndex:
|
|
19
|
-
textDecoration: 'none',
|
|
52
|
+
zIndex: zIndex,
|
|
20
53
|
fontFamily: 'arial'
|
|
21
54
|
} },
|
|
22
|
-
react_1.default.createElement("
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
55
|
+
react_1.default.createElement("a", { href: "https://u24.gov.ua", target: "_blank", rel: "noopener noreferrer", title: "Donate to support freedom.", style: {
|
|
56
|
+
display: 'flex',
|
|
57
|
+
alignItems: 'center',
|
|
58
|
+
textDecoration: 'none'
|
|
59
|
+
} },
|
|
60
|
+
react_1.default.createElement("div", { role: "img", "aria-label": "Flag of Ukraine", className: flagClassName, style: { height: '25px', marginRight: '10px' } },
|
|
61
|
+
react_1.default.createElement("div", { style: { width: '40px', height: '12.5px', background: '#005BBB' } }),
|
|
62
|
+
react_1.default.createElement("div", { style: { width: '40px', height: '12.5px', background: '#FFD500' } })),
|
|
63
|
+
react_1.default.createElement("div", { className: textClassName, style: { color: 'white', fontSize: '12px', lineHeight: '25px' } }, "Donate to support freedom.")),
|
|
64
|
+
react_1.default.createElement("a", { href: "https://www.npmjs.com/package/react-support-ukraine-banner", target: "_blank", rel: "noopener noreferrer", "aria-label": "Get the same banner on npm", title: "Get the same: react-support-ukraine-banner", style: {
|
|
65
|
+
position: 'absolute',
|
|
66
|
+
right: '10px',
|
|
67
|
+
top: 0,
|
|
68
|
+
height: '100%',
|
|
69
|
+
display: 'flex',
|
|
70
|
+
alignItems: 'center',
|
|
71
|
+
fontSize: '12px',
|
|
72
|
+
lineHeight: '25px',
|
|
73
|
+
color: isHover ? '#fff' : '#000', // black-on-black until banner hover/focus
|
|
74
|
+
transition: 'color 150ms ease',
|
|
75
|
+
cursor: 'pointer',
|
|
76
|
+
textDecoration: 'none'
|
|
77
|
+
} }, "Get the same")));
|
|
78
|
+
if (!reserveSpace) {
|
|
79
|
+
return banner;
|
|
80
|
+
}
|
|
81
|
+
return (react_1.default.createElement("div", { style: { position: 'relative', minHeight: toCssLength(slotMinHeight) } }, banner));
|
|
26
82
|
};
|
|
27
83
|
exports.default = SupportUkraineBanner;
|
|
28
84
|
//# sourceMappingURL=SupportUkraineBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportUkraineBanner.js","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"SupportUkraineBanner.js","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AAYxC,IAAM,WAAW,GAAG,UAAC,KAAsB;IACvC,OAAA,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,KAAK,OAAI,CAAC,CAAC,CAAC,KAAK;AAAhD,CAAgD,CAAC;AAErD,IAAM,oBAAoB,GAAwC,UAAC,EAQlE;QAPG,SAAS,eAAA,EACT,aAAa,mBAAA,EACb,aAAa,mBAAA,EACb,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA,EACpB,qBAAkB,EAAlB,aAAa,mBAAG,EAAE,KAAA,EAClB,gBAAqB,EAArB,QAAQ,mBAAG,UAAU,KAAA,EACrB,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA;IAER,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,IAAM,MAAM,GAAG,CACX,uCACI,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EACpC,YAAY,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACrC,cAAc,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,EACtC,aAAa,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB,EACtC,KAAK,EAAE;YACH,QAAQ,UAAA;YACR,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,CAAC;YACR,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,OAAO,EAAE,KAAK;YACd,MAAM,QAAA;YACN,UAAU,EAAE,OAAO;SACtB;QAED,qCACI,IAAI,EAAC,oBAAoB,EACzB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,MAAM;aACzB;YAED,uCACI,IAAI,EAAC,KAAK,gBACC,iBAAiB,EAC5B,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE;gBAE9C,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAAQ;gBAC9E,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAAQ,CAC5E;YACN,uCAAK,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,iCAExF,CACN;QAEJ,qCACI,IAAI,EAAC,4DAA4D,EACjE,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,gBACd,4BAA4B,EACvC,KAAK,EAAC,4CAA4C,EAClD,KAAK,EAAE;gBACH,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,MAAM;gBACb,GAAG,EAAE,CAAC;gBACN,MAAM,EAAE,MAAM;gBACd,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,MAAM;gBAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,0CAA0C;gBAC5E,UAAU,EAAE,kBAAkB;gBAC9B,MAAM,EAAE,SAAS;gBACjB,cAAc,EAAE,MAAM;aACzB,mBAGD,CACF,CACT,CAAC;IAEF,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,CAAC,aAAa,CAAC,EAAE,IACtE,MAAM,CACL,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,oBAAoB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-support-ukraine-banner",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.11",
|
|
4
4
|
"description": "React component to show support for Ukraine with u24.gov.ua link on the top of the page.",
|
|
5
5
|
"main": "dist/SupportUkraineBanner.js",
|
|
6
6
|
"types": "dist/SupportUkraineBanner.d.ts",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@types/react": "^19.2.
|
|
34
|
+
"@types/react": "^19.2.14",
|
|
35
35
|
"@types/react-dom": "^19.2.3",
|
|
36
36
|
"typescript": "^5.9.3"
|
|
37
37
|
},
|