Skip to content

Instantly share code, notes, and snippets.

Last active August 18, 2022 17:52
What would you like to do?
Alternative implementation of LoggedInBanner.
// Alternative code, from my tweet:
// Generic, reusable Banner component
function Banner({ type, children }) {
const bg = type === 'success' ? 'green' : 'red';
return (
style={{ backgroundColor: bg }}
// Generic, reusable only display for logged in:
function OnlyDisplayIfLoggedIn({ user, children }) {
// Only logged in users are allowed to see.
if (!user) {
return null;
return <>{children}</>;
// Follow up tweet contrasting usage.
<LoggedInBanner type={type} user={user}>
// vs.
<OnlyDisplayIfLoggedIn user={user}>
<Banner type={type}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment