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.
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.
Install the library through NPM with the following command:
npm install notificare-react-preview-componentsGetting 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.
A push notification preview can be generated through the NotificareNotificationPreview component.
import { NotificareNotificationPreview } from 'notificare-react-preview-components';
export default function NotificationComposer() {
return (
<NotificareNotificationPreview
applicationId="..."
notification={...}
serviceKey="..."
/>
)
}Check the component documentation for more information.
Our React component library is designed with both flexibility and reliability in mind. All components are easy to customize—styles can be effortlessly overridden using your own CSS, allowing seamless integration with your app or website’s design system.
We’ve also prioritized style isolation to prevent conflicts. By using scoped, predictable class naming conventions, the library ensures that its styles won’t clash with your existing codebase.
For example, to adjust the size of the loading animation, you can simply add the following CSS:
.notificare .notificare__push__webshot-loading-icon-svg {
width: 48px;
height: 48px;
}