Push Notification
Push notifications are messages that can be sent directly to a user’s mobile device. Unlike in-app messages, push notifications can appear on a lock screen or in the top section of a mobile device.
| Type | Resource |
|---|---|
| Design | Figma |
| Web | Web Storybook |
| Code | Gitlab |
Notification
Via website.com
Usage
import { PushNotification } from 'bio-bind-ui';<PushNotification
appName='Browser Name'
description='Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit'
descriptionMaxLines={5}
image={{
alt: '',
src: 'https://picsum.photos/200/300',
}}
imageSize='lg'
mode='light'
onClickAdditionalIcon={() => {}}
onClose={() => {}}
title='Notification'
website='website.com'
/>Examples
Size
Use size for set the push notification size: sm or lg
Notification
Via website.com
Notification
Via website.com
Mode (Optional)
Use mode to change push notification color light or dark
Notification
Via website.com
Notification
Via website.com
Props
| Props | Required | Default | Type | description |
|---|---|---|---|---|
| mode | false | light | light dark | Use mode to change push notification color light or dark. |
| image | false | - | HTMLImageElement | Use image to change or remove push notification image. |
| imageSize | false | lg | sm lg | Use imageSize to set image size. |
| appName | true | - | string | Use appName to change name of app. |
| title | true | - | string | Use title to change title of push notification. |
| description | true | - | string | Use description to change description of push notification. |
| website | true | - | string | Use website to change web url on push notification. |
| additionalIcon | false | - | React.ReactNode | Use additionalIcon to change right icon on push notification. |
| descriptionMaxLines | true | 5 | number | Use descriptionMaxLines to set descriptionMaxLines. |
| appIcon | false | - | React.ReactNode | Use appIcon to change icon of app on push notification. |
| showClose | false | false | boolean | Use showClose for toggle close icon. |
| onClose | true | - | function | Function for close notification when clicked. |
| showAdditionalIcon | false | false | boolean | Use showAdditionalIcon for toggle show or hide additionalIcon. |
| onClickAdditionalIcon | true | - | funtion | Function for click on additionalIcon. |