notificare-react-preview-components 1.0.0 → 1.2.0

package/README.md

@@ -5,7 +5,7 @@
 [![GitHub release](https://img.shields.io/github/v/release/notificare/notificare-react-preview-components)](https://github.com/notificare/notificare-react-preview-components/releases)
 [![License](https://img.shields.io/github/license/notificare/notificare-react-preview-components)](https://github.com/notificare/notificare-react-preview-components/blob/main/LICENSE)
 
-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 (*coming soon...*) or Wallet Pass (*coming soon...*) will appear in a user's device.
+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.
 
 # Table of contents
 
@@ -13,10 +13,16 @@ The **Notificare React Preview Components** consists of a collection of React co
 - [Installation](#installation)
 - [Getting Started](#getting-started)
 - [Theming](#theming)
+- [Localisation](#localisation)
 
 ## Features
 
-**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.
+**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.
+
+**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.
+
+**Push onboarding**: Visualize how the Push Onboarding UI will appear when your application uses a managed push onboarding flow.
+
 
 ## Installation
 
@@ -26,13 +32,17 @@ Install the library through NPM with the following command:
 npm install notificare-react-preview-components
 ```
 
-## Getting Started
+## Requesting a service key
+
+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).
+
+## Getting started
 
 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.
 
 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.
 
-### Push Notifications
+### Push notifications
 
 A push notification preview can be generated through the `NotificareNotificationPreview` component.
 
@@ -50,7 +60,43 @@ export default function NotificationComposer() {
 }
 ```
 
-Check the component [documentation](https://github.com/notificare/notificare-react-preview-components/blob/main/docs/push.md) for more information.
+Check the component [documentation](./docs/push.md) for more information.
+
+### In-app messages
+
+An in-app message preview can be generated through the `NotificareInAppMessagePreview` component.
+
+```tsx
+import { NotificareInAppMessagePreview } from 'notificare-react-preview-components';
+
+export default function InAppMessageComposer() {
+  return (
+    <NotificareInAppMessagePreview
+      inAppMessage={...}
+    />
+  )
+}
+```
+
+Check the component [documentation](docs/in-app-messaging.md) for more information.
+
+### Push Onboarding
+
+A push onboarding preview can be generated through the `NotificarePushOnboardingPreview` component.
+
+```tsx
+import { NotificarePushOnboardingPreview } from 'notificare-react-preview-components';
+
+export default function PushOnboardingComposer() {
+  return (
+    <NotificarePushOnboardingPreview
+      applicationInfo={...}
+    />
+  )
+}
+```
+
+Check the component [documentation](docs/push-onboarding.md) for more information.
 
 ## Theming
 
@@ -61,8 +107,12 @@ We’ve also prioritized style isolation to prevent conflicts. By using scoped,
 For example, to adjust the size of the loading animation, you can simply add the following CSS:
 
 ```css
-.notificare .notificare__push__webshot-loading-icon-svg {
+.notificare .notificare__loading__icon {
     width: 48px;
     height: 48px;
 }
 ```
+
+## Localisation
+
+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.