react-support-ukraine-banner 1.1.10 → 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,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;
|
|
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"}
|
|
@@ -34,11 +34,14 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
var react_1 = __importStar(require("react"));
|
|
37
|
+
var toCssLength = function (value) {
|
|
38
|
+
return typeof value === 'number' ? "".concat(value, "px") : value;
|
|
39
|
+
};
|
|
37
40
|
var SupportUkraineBanner = function (_a) {
|
|
38
|
-
var className = _a.className, flagClassName = _a.flagClassName, textClassName = _a.textClassName;
|
|
39
|
-
var
|
|
40
|
-
|
|
41
|
-
position:
|
|
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,
|
|
42
45
|
left: 0,
|
|
43
46
|
top: 0,
|
|
44
47
|
right: 0,
|
|
@@ -46,7 +49,7 @@ var SupportUkraineBanner = function (_a) {
|
|
|
46
49
|
display: 'flex',
|
|
47
50
|
justifyContent: 'center',
|
|
48
51
|
padding: '5px',
|
|
49
|
-
zIndex:
|
|
52
|
+
zIndex: zIndex,
|
|
50
53
|
fontFamily: 'arial'
|
|
51
54
|
} },
|
|
52
55
|
react_1.default.createElement("a", { href: "https://u24.gov.ua", target: "_blank", rel: "noopener noreferrer", title: "Donate to support freedom.", style: {
|
|
@@ -72,6 +75,10 @@ var SupportUkraineBanner = function (_a) {
|
|
|
72
75
|
cursor: 'pointer',
|
|
73
76
|
textDecoration: 'none'
|
|
74
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));
|
|
75
82
|
};
|
|
76
83
|
exports.default = SupportUkraineBanner;
|
|
77
84
|
//# sourceMappingURL=SupportUkraineBanner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SupportUkraineBanner.js","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;
|
|
1
|
+
{"version":3,"file":"SupportUkraineBanner.js","sourceRoot":"","sources":["../src/SupportUkraineBanner.tsx"],"names":[],"mappings":"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"}
|
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",
|