@tdcerhverv/notification
v0.3.2
Published
Notification component
Downloads
4
Maintainers
Keywords
Readme
Notification component
Usage
Example of App component:
import { NotificationProvider, Notification } from '@tdcerhverv/notification';
export default function AppExample() {
return return (
<NotificationProvider>
<Notification />
...
</NotificationProvider>
);
}
Example of component using useNotification()
hook to show a notification:
import { NotificationTypes, useNotification } from '@tdcerhverv/notification';
export default function NotificationExample() {
const notification = useNotification();
const handleSubmit = async () => {
const [error, result] = await request(someRequest);
if (error) {
notification.dispatch({
type: 'Show',
payload: {
type: NotificationTypes.NEGATIVE,
message: 'Something went wrong ❌',
},
});
}
if (result) {
notification.dispatch({
type: 'Show',
payload: {
type: NotificationTypes.POSITIVE,
autoHideMilliseconds: 3000,
message: 'All good 👍',
},
});
}
};
return return (
<form onSubmit={handleSubmit}>
...
<DefaultButton type="submit">Submit</DefaultButton>
</form>
);
}
Props
enum NotificationTypes {
POSITIVE,
NEGATIVE,
INFO,
}
type NotificationPayload = {
type: NotificationType;
message: React.ReactNode;
autoHideMilliseconds?: number;
};