eggheadio / egghead-ui

egghead UI pieces as a package and app
https://styleguide.egghead.io
28 stars 6 forks source link

Add Maybe component #101

Closed trevordmiller closed 7 years ago

trevordmiller commented 7 years ago

Would be nice to have a Maybe component to conditionally render content or null depending on if a condition is met, to replace the need for so many null ternaries.

Could be something like:

const Maybe = ({children, condition}) => condition
  ? children
  : null

Which could be used like:

<Maybe condition={!isEmpty(data.courses)}>
  <HotCourses courses={data.courses} tag={data.tag} />
</Maybe>
<Maybe condition={!isEmpty(data.latest.lessons)}>
  <Latest lessons={data.latest.lessons} tag={data.tag} />
</Maybe>

Instead of:

{
  isEmpty(data.courses) ?
    null:
  <HotCourses courses={data.courses} tag={data.tag} />
}
{
  isEmpty(data.latest.lessons) ?
    null :
  <Latest lessons={data.latest.lessons} tag={data.tag} />
}

Idea from https://github.com/eggheadio/egghead-rails/pull/1295#discussion_r109486696 initially

theianjones commented 7 years ago

I love this idea!