notificare-react-preview-components 1.0.0 → 1.1.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 +36 -6
- package/dist/cjs/index.js +9 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +9 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +126 -7
- package/package.json +19 -16
package/README.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
[](https://github.com/notificare/notificare-react-preview-components/releases)
|
|
6
6
|
[](https://github.com/notificare/notificare-react-preview-components/blob/main/LICENSE)
|
|
7
7
|
|
|
8
|
-
The **Notificare React Preview Components** consists of a collection of React components that allows you to visualize how a Notificare
|
|
8
|
+
The **Notificare React Preview Components** consists of a collection of React components that allows you to visualize how a Notificare push notification, in-app message or wallet pass (*coming soon...*) will appear in a user's device.
|
|
9
9
|
|
|
10
10
|
# Table of contents
|
|
11
11
|
|
|
@@ -13,10 +13,14 @@ The **Notificare React Preview Components** consists of a collection of React co
|
|
|
13
13
|
- [Installation](#installation)
|
|
14
14
|
- [Getting Started](#getting-started)
|
|
15
15
|
- [Theming](#theming)
|
|
16
|
+
- [Localisation](#localisation)
|
|
16
17
|
|
|
17
18
|
## Features
|
|
18
19
|
|
|
19
|
-
**Push
|
|
20
|
+
**Push notifications**: Easily preview how a Notificare push notification will appear across various platforms and devices. With very intuitive UI controls, you can seamlessly switch between different preview variants to see how it looks like in various platforms and form-factors.
|
|
21
|
+
|
|
22
|
+
**In-app messages**: See how a Notificare in-app message will appear on a mobile device — whether it’s a card, banner, or full-screen view.
|
|
23
|
+
|
|
20
24
|
|
|
21
25
|
## Installation
|
|
22
26
|
|
|
@@ -26,13 +30,17 @@ Install the library through NPM with the following command:
|
|
|
26
30
|
npm install notificare-react-preview-components
|
|
27
31
|
```
|
|
28
32
|
|
|
29
|
-
##
|
|
33
|
+
## Requesting a service key
|
|
34
|
+
|
|
35
|
+
Before you can take advantage of the library's full potential, you'll need to request a service key. This key is required for authentication and access to certain features such as previewing push notifications. [Learn how to request a service key](./docs/requesting-a-service-key.md).
|
|
36
|
+
|
|
37
|
+
## Getting started
|
|
30
38
|
|
|
31
39
|
Getting up and running with this component library is quick and easy. Each component is designed to be modular and flexible, so you can integrate them seamlessly into your existing React application. Whether you’re building something small or scaling up a larger project, the process is the same: simply import the components you need and place them wherever they make the most sense in your UI.
|
|
32
40
|
|
|
33
41
|
Below are basic examples for each component to show how they work. Be sure to check the documentation for each component to explore available props and customization options.
|
|
34
42
|
|
|
35
|
-
### Push
|
|
43
|
+
### Push notifications
|
|
36
44
|
|
|
37
45
|
A push notification preview can be generated through the `NotificareNotificationPreview` component.
|
|
38
46
|
|
|
@@ -50,7 +58,25 @@ export default function NotificationComposer() {
|
|
|
50
58
|
}
|
|
51
59
|
```
|
|
52
60
|
|
|
53
|
-
Check the component [documentation](
|
|
61
|
+
Check the component [documentation](./docs/push.md) for more information.
|
|
62
|
+
|
|
63
|
+
### In-app messages
|
|
64
|
+
|
|
65
|
+
An in-app message preview can be generated through the `NotificareInAppMessagePreview` component.
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { NotificareInAppMessagePreview } from 'notificare-react-preview-components';
|
|
69
|
+
|
|
70
|
+
export default function InAppMessageComposer() {
|
|
71
|
+
return (
|
|
72
|
+
<NotificareInAppMessagePreview
|
|
73
|
+
inAppMessage={...}
|
|
74
|
+
/>
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
Check the component [documentation](docs/in-app-messaging.md) for more information.
|
|
54
80
|
|
|
55
81
|
## Theming
|
|
56
82
|
|
|
@@ -61,8 +87,12 @@ We’ve also prioritized style isolation to prevent conflicts. By using scoped,
|
|
|
61
87
|
For example, to adjust the size of the loading animation, you can simply add the following CSS:
|
|
62
88
|
|
|
63
89
|
```css
|
|
64
|
-
.notificare .
|
|
90
|
+
.notificare .notificare__loading__icon {
|
|
65
91
|
width: 48px;
|
|
66
92
|
height: 48px;
|
|
67
93
|
}
|
|
68
94
|
```
|
|
95
|
+
|
|
96
|
+
## Localisation
|
|
97
|
+
|
|
98
|
+
Regardless of the preview component you're using, you can select which language will be used in the UI controls and in the preview itself. Components will be automatically translated based on the chosen language, if default translations are available. Furthermore, you can also provide fully customizable translations, allowing you to personalize components to your liking.<br><br>Check each component's documentation for more details on how to implement this.
|