Skip to content

Instantly share code, notes, and snippets.

@salcode
Last active August 18, 2022 17:52
Show Gist options
  • Save salcode/2b076677dfa4f7c985c1f64ebb4acde4 to your computer and use it in GitHub Desktop.
Save salcode/2b076677dfa4f7c985c1f64ebb4acde4 to your computer and use it in GitHub Desktop.
Alternative implementation of LoggedInBanner.
// Alternative code, from my tweet:
// Generic, reusable Banner component
function Banner({ type, children }) {
const bg = type === 'success' ? 'green' : 'red';
return (
<div
className={styles.banner}
style={{ backgroundColor: bg }}
>
{children}
</div>
);
}
// 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}>
<p>Hello</p>
</LoggedInBanner>
// vs.
<OnlyDisplayIfLoggedIn user={user}>
<Banner type={type}>
<p>Hello</p>
</Banner>
</OnlyDisplayIfLoggedIn>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment