🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Notification React Component

With Notification component you can show required messages that looks like Push (or Local) system notifications.

Notification Components

There are following components included:

  • Notification

Notification Props

NameTypeDefaultDescription
buttonReactNode

Notification button content

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-white dark:bg-[#1e1e1e]'

Notifiaction bg color in iOS theme

colors.bgMaterialstring'bg-md-light-surface-5 dark:bg-md-dark-surface-5'

Notification bg color in Material theme

colors.deleteIconIosstring'fill-stone-400 active:fill-stone-200 dark:fill-stone-500 dark:active:fill-stone-700'

Notification Delete Icon color in IOS theme

colors.deleteIconMdstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification Delete Icon color in Material theme

colors.subtitleIosstring'text-black dark:text-white'

Notification subtitle color in IOS theme

colors.textMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'

Notification text color in Material theme

colors.titleIosstring'text-black dark:text-white'

Notification title color in IOS theme

colors.titleRightIosstring'text-opacity-45 text-black dark:text-white dark:text-opacity-45'

Notification right text color in IOS theme

colors.titleRightMdstring'text-md-light-on-surface-variant before:bg-md-light-on-surface-variant dark:text-md-dark-on-surface-variant before:dark:bg-md-dark-on-surface-variant'

Notification right text color in Material theme

componentstring'div'

Component's HTML Element

iconReactNode

Notification icon HTML layout or image

openedbooleanundefined

Allows to open/close Notification and set its initial state

subtitleReactNode

Content of the notification "subtitle" area

textReactNode

Content of the notification "text" area

titleReactNode

Content of the notification "title" area

titleRightTextReactNode

Content of the notification "title right text" area

translucentbooleantrue

Makes Notification background translucent (with backdrop-filter: blur) in iOS theme

onClosefunction(e)

Click handler on to close element

Examples

Notification.jsx
import React, { useState, useEffect } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Block,
Notification,
Button,
Dialog,
DialogButton,
} from 'konsta/react';
import DemoIcon from '../components/DemoIcon';
export default function NotificationPage() {
const [notificationFull, setNotificationFull] = useState(false);
const [notificationWithButton, setNotificationWithButton] = useState(false);
const [notificationCloseOnClick, setNotificationCloseOnClick] =
useState(false);
const [notificationCallbackOnClose, setNotificationCallbackOnClose] =
useState(false);
const [alertOpened, setAlertOpened] = useState(false);
const openNotification = (setter) => {
setNotificationFull(false);
setNotificationWithButton(false);
setNotificationCloseOnClick(false);
setNotificationCallbackOnClose(false);
setter(true);
};
useEffect(() => {
let timer;
if (notificationFull) {
timer = setTimeout(() => {
setNotificationFull(false);
}, 3000);
}
return () => clearTimeout(timer);
}, [notificationFull]);
return (
<Page>
<Navbar
title="Notification"
/>
<Notification
opened={notificationFull}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="This is a subtitle"
text="This is a simple notification message"
/>
<Notification
opened={notificationWithButton}
icon={<DemoIcon />}
title="Konsta UI"
button
onClick={() => setNotificationWithButton(false)}
subtitle="Notification with close button"
text="Click (x) button to close me"
/>
<Notification
opened={notificationCloseOnClick}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => setNotificationCloseOnClick(false)}
/>
<Notification
opened={notificationCallbackOnClose}
icon={<DemoIcon />}
title="Konsta UI"
titleRightText="now"
subtitle="Notification with close on click"
text="Click me to close"
onClick={() => {
setNotificationCallbackOnClose(false);
setAlertOpened(true);
}}
/>
<Dialog
opened={alertOpened}
onBackdropClick={() => setAlertOpened(false)}
title="Konsta UI"
content="Notification closed"
buttons={
<DialogButton onClick={() => setAlertOpened(false)}>Ok</DialogButton>
}
/>
<Block strongIos outlineIos className="space-y-4">
<p>
Konsta UI comes with simple Notifications component that allows you to
show some useful messages to user and request basic actions.
</p>
<p>
<Button onClick={() => openNotification(setNotificationFull)}>
Full layout notification
</Button>
</p>
<p>
<Button onClick={() => openNotification(setNotificationWithButton)}>
With Close Button
</Button>
</p>
<p>
<Button onClick={() => openNotification(setNotificationCloseOnClick)}>
Click to Close
</Button>
</p>
<p>
<Button
onClick={() => openNotification(setNotificationCallbackOnClose)}
>
Callback on Close
</Button>
</p>
</Block>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.