Skip to content

Instantly share code, notes, and snippets.

@bradfrost
Last active February 3, 2019 06:37
Show Gist options
  • Save bradfrost/8983ef87f0a236d247f9a8deaf1feefc to your computer and use it in GitHub Desktop.
Save bradfrost/8983ef87f0a236d247f9a8deaf1feefc to your computer and use it in GitHub Desktop.
React component structure
<Breadcrumbs>
<Breadcrumb text="Home" href="/" />
<Breadcrumb text="Child" href="/child" />
<Breadcrumb text="Grandchild" href="/child/grandchild" />
</Breadcrumbs>
// or
<Breadcrumbs items={[
{
text: "Home",
href: "/"
},
{
text: "Child",
href: "/child"
},
{
text: "Grandchild",
href: "/child/grandchild"
}
]} />
@jdfm
Copy link

jdfm commented Jan 30, 2019

const Breadcrumb = ({ text = 'PLACEHOLDER', href = '#' }) => /* whatever you have now */

const Breadcrumbs = ({ children = Breadcrumb, items }) => <whatever>items.map(children)</whatever>

This can be used like:

<Breadcrumbs items={data} />

Or, if you don't like the default guts of it:

<Breadcrumbs items={data}>
  ({ text, href }) => /* Whatever JSX you want, but different from default. */
</Breadcrumbs>

Not limited to the same data structure (still breadcrumbs, but using different kind of data?).

Not sure how the community feels about this though. Thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment