react-kofi-overlay 0.1.0 → 0.2.0
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 +8 -8
- package/dist/Donate.d.ts +10 -9
- package/dist/Donate.js +2 -2
- package/dist/Donate.js.map +1 -1
- package/dist/bundle.js +2 -11496
- package/dist/bundle.js.LICENSE.txt +5 -0
- package/package.json +4 -3
- package/src/Donate.module.scss +9 -9
- package/webpack.config.js +39 -5
- package/dist/main.css +0 -84
package/README.md
CHANGED
|
@@ -65,12 +65,12 @@ import { Donate } from 'react-kofi-overlay'
|
|
|
65
65
|
|
|
66
66
|
### Props
|
|
67
67
|
|
|
68
|
-
| Prop
|
|
68
|
+
| Prop | Required | Type | Description |
|
|
69
69
|
| ------------- | ------------- | ------------- | ------------- |
|
|
70
|
-
| `username` | required | string | Ko-fi profile to display in the donation panel. Corresponds to the Ko-fi page at ko-fi.com/<username> |
|
|
71
70
|
| (children) | required | ReactNode | Contents of the donation button. Can be plain text or any React nodes that are valid children of a `<button>` element. |
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
71
|
+
| `username` | required | string | Ko-fi profile to display in the donation panel. Corresponds to the Ko-fi page at `ko-fi.com/<username>` |
|
|
72
|
+
| `classNames` | optional | object | Class names to apply to different parts of the component for styling. See [Styling](#styling) for more info. |
|
|
73
|
+
| `styles` | optional | object | Inline styles to apply to different parts of the component for styling. See [Styling](#styling) for more info. |
|
|
74
74
|
| `onToggle` | optional | function | Function to call when the donate panel is opened or closed. It receives one argument: a boolean `open` value that indicates if the panel was opened or closed. |
|
|
75
75
|
|
|
76
76
|
### Styling
|
|
@@ -81,11 +81,11 @@ Note: While you could provide both `classNames` and `styles`, it isn't recommend
|
|
|
81
81
|
|
|
82
82
|
| Name | Description |
|
|
83
83
|
| ------------- | ------------- |
|
|
84
|
-
| `donateBtn` | Donate button
|
|
85
|
-
| `panel` |
|
|
86
|
-
| `closeBtn` |
|
|
84
|
+
| `donateBtn` | Donate `<button>` element. |
|
|
85
|
+
| `panel` | Wrapper `<div>` around panel that appears when donate button is clicked. By default, the panel is anchored to the bottom right of the viewport on desktop and full screen on mobile. |
|
|
86
|
+
| `closeBtn` | `<button>` to close the donate panel. |
|
|
87
87
|
| `closeIcon` | (X) icon within the panel close button. |
|
|
88
|
-
| `profileLink` |
|
|
88
|
+
| `profileLink` | Wrapper `<div>` around the link to your Ko-fi profile. By default, it's anchored to the bottom of the donate panel. |
|
|
89
89
|
|
|
90
90
|
|
|
91
91
|
## Development
|
package/dist/Donate.d.ts
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import React, { CSSProperties } from 'react';
|
|
2
2
|
export interface StyleDefs<T> {
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
5
|
-
* the viewport on desktop and full screen on mobile.
|
|
4
|
+
* Donate button – a <button> element.
|
|
6
5
|
*/
|
|
7
|
-
|
|
6
|
+
donateBtn?: T;
|
|
8
7
|
/**
|
|
9
|
-
*
|
|
8
|
+
* Panel wrapper that popus up when donate button is clicked. By default,
|
|
9
|
+
* the panel is anchored to the bottom right of the viewport on desktop and
|
|
10
|
+
* full screen on mobile.
|
|
10
11
|
*/
|
|
11
|
-
|
|
12
|
+
panel?: T;
|
|
12
13
|
/**
|
|
13
|
-
* Button to close the donate
|
|
14
|
+
* Button to close the donate panel.
|
|
14
15
|
*/
|
|
15
16
|
closeBtn?: T;
|
|
16
17
|
/**
|
|
17
|
-
* (X) icon within the
|
|
18
|
+
* (X) icon within the panel close button.
|
|
18
19
|
*/
|
|
19
20
|
closeIcon?: T;
|
|
20
21
|
/**
|
|
21
|
-
* Link to your Ko-fi profile. By default, it's anchored to the bottom of the donate
|
|
22
|
+
* Link to your Ko-fi profile. By default, it's anchored to the bottom of the donate panel.
|
|
22
23
|
*/
|
|
23
24
|
profileLink?: T;
|
|
24
25
|
}
|
|
@@ -45,7 +46,7 @@ export interface DonateProps {
|
|
|
45
46
|
onToggle?: (open: boolean) => void;
|
|
46
47
|
}
|
|
47
48
|
/**
|
|
48
|
-
* Component to display a button that opens a Ko-fi donation
|
|
49
|
+
* Component to display a button that opens a Ko-fi donation panel when clicked.
|
|
49
50
|
*
|
|
50
51
|
* @component
|
|
51
52
|
* @example
|
package/dist/Donate.js
CHANGED
|
@@ -33,7 +33,7 @@ var Donate_module_scss_1 = __importDefault(require("./Donate.module.scss"));
|
|
|
33
33
|
var react_icons_1 = require("react-icons");
|
|
34
34
|
var bs_1 = require("react-icons/bs");
|
|
35
35
|
/**
|
|
36
|
-
* Component to display a button that opens a Ko-fi donation
|
|
36
|
+
* Component to display a button that opens a Ko-fi donation panel when clicked.
|
|
37
37
|
*
|
|
38
38
|
* @component
|
|
39
39
|
* @example
|
|
@@ -52,7 +52,7 @@ function Donate(_a) {
|
|
|
52
52
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
53
53
|
react_1.default.createElement("button", { className: (0, classnames_1.default)(Donate_module_scss_1.default.donateBtn, classNames.donateBtn), style: styles.donateBtn, onClick: function () { return handleOpen(true); } }, children),
|
|
54
54
|
open ?
|
|
55
|
-
react_1.default.createElement("div", { className: (0, classnames_1.default)(Donate_module_scss_1.default.
|
|
55
|
+
react_1.default.createElement("div", { className: (0, classnames_1.default)(Donate_module_scss_1.default.panel, classNames.panel), style: styles.panel },
|
|
56
56
|
react_1.default.createElement("button", { className: (0, classnames_1.default)(Donate_module_scss_1.default.closeBtn, classNames.closeBtn), style: styles.closeBtn, onClick: function () { return handleOpen(false); } },
|
|
57
57
|
react_1.default.createElement(react_icons_1.IconContext.Provider, { value: {
|
|
58
58
|
className: (0, classnames_1.default)(Donate_module_scss_1.default.closeIcon, classNames.closeIcon),
|
package/dist/Donate.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Donate.js","sourceRoot":"","sources":["../src/Donate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEZ,6CAAsD;AACtD,0DAAgC;AAEhC,4EAAoC;AACpC,2CAAyC;AACzC,qCAAiD;
|
|
1
|
+
{"version":3,"file":"Donate.js","sourceRoot":"","sources":["../src/Donate.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEZ,6CAAsD;AACtD,0DAAgC;AAEhC,4EAAoC;AACpC,2CAAyC;AACzC,qCAAiD;AAmDjD;;;;;;;;GAQG;AACH,SAAwB,MAAM,CAAC,EAMjB;QALZ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,gBAAmB,EAAnB,QAAQ,mBAAG,cAAO,CAAC,KAAA;IAEnB,IAAM,OAAO,GAAG,4BAAqB,QAAQ,CAAE,CAAA;IACzC,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IAEvC,IAAM,UAAU,GAAG,UAAC,MAAe;QACjC,OAAO,CAAC,MAAM,CAAC,CAAA;QACf,QAAQ,CAAC,MAAM,CAAC,CAAA;IAClB,CAAC,CAAA;IAED,OAAO,CACL;QACE,0CACE,SAAS,EAAE,IAAA,oBAAO,EAAC,4BAAC,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EACrD,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,IAAI,CAAC,EAAhB,CAAgB,IAE9B,QAAQ,CACF;QACR,IAAI,CAAC,CAAC;YACL,uCACE,SAAS,EAAE,IAAA,oBAAO,EAAC,4BAAC,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,MAAM,CAAC,KAAK;gBAEnB,0CACE,SAAS,EAAE,IAAA,oBAAO,EAAC,4BAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EACnD,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,OAAO,EAAE,cAAM,OAAA,UAAU,CAAC,KAAK,CAAC,EAAjB,CAAiB;oBAEhC,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE;4BAC3B,SAAS,EAAE,IAAA,oBAAO,EAAC,4BAAC,CAAC,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC;4BACrD,KAAK,EAAE,MAAM,CAAC,SAAS;yBACxB;wBACC,8BAAC,QAAS,IAAC,KAAK,EAAC,OAAO,GAAG,CACN,CAChB;gBACT,0CAAQ,GAAG,EAAE,UAAG,OAAO,0CAAuC,GAAI;gBAClE,uCACE,SAAS,EAAE,IAAA,oBAAO,EAAC,4BAAC,CAAC,WAAW,EAAE,UAAU,CAAC,WAAW,CAAC,EACzD,KAAK,EAAE,MAAM,CAAC,WAAW;oBAEzB,qCAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,YAAY;;wBACrC,QAAQ,CACjB,CACA,CACF;YACR,CAAC,CAAC,IAAI,CACL,CACJ,CAAA;AACH,CAAC;AAtDD,yBAsDC"}
|