Allow notifications to accept a title, body, and CTA
See original GitHub issueProposal
I’m proposing a change to the Notification component to allow rendering a title, body, and a CTA.
Approaches
Currently, the Notification component is called like so:
Notification.success('Text content of notification (string)', {
duration: 6000 (int)
canClose: true (boolean)
})
I can think of two approaches to achieve this:
1. Change the text to accept any node
Example usage:
const message = (
<React.Fragment>
<Heading>Notification title</Heading>
<Paragraph>Some notification body copy</Paragraph>
<TextLink href="#">Some CTA</TextLink>
</React.Fragment>
);
Notification.success(message, {
duration: 6000 (int)
canClose: true (boolean)
})
Pros:
- Minimal changes required
- Uses exactly the same API to render content as before
Cons:
- Could end up with many different variations
- Need to refer to an example to know how to best construct message (could create NotificationTitle/NotificationBody/NotificationCta components though)
2. Add explicit props
Example usage:
const message = (
Notification.success('Body text content of notification (string)', {
title: 'Message title' (string),
cta: {
label: 'CTA title (string)',
action: '() => {blah} (function)'
}
duration: 6000 (int)
canClose: true (boolean)
})
Pros:
- Complete control over how component renders
- TypeScript will show API usage hints
Cons:
- Slightly confusing API (mix of strinng for body and settings object for title and CTA)
- Slightly more involved changes needed
Issue Analytics
- State:
- Created 4 years ago
- Reactions:5
- Comments:8 (7 by maintainers)
Top Results From Across the Web
Declaring Your Actionable Notification Types - Apple Developer
Declare one or more notification categories at launch time from your iOS app. · Assign appropriate actions to your notification categories. · Handle...
Read more >5 Ways Of User Engagement With Push Notification CTAs - VWO
Increase push notification user engagement with call to action buttons. Here are some examples on how to use this industry wise.
Read more >10 Effective Push Notification Examples and Why They Work
This message title is followed by the notification's body copy, which gives a quick and dirty pitch for why the user needs the...
Read more >Behind Web Push Notifications: What Marketers Need to Know
web push notification. ... These notifications allow you to send outreach that typically includes a title, body copy, a CTA, action buttons, and...
Read more >An Advanced Guide to Mobile Push Notifications (Best ...
Furthermore, the title, body text, CTA, and thumbnail (when allowed) need to be engaging and entice each user to complete the conversion ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
FYI, all notifications methods are exposed to UI Extension SDK so we shouldn’t do breaking changes.
What about the following:
@burakukula Thanks for taking a look, I’m leaning towards option 2 too as it’s a bit more foolproof
@gui-santos This would be a lot nicer, but, if we broke the current API where you pass a string and an options object it would be a breaking change. Could possibly add it as an option in the options object too though