component-injection.md

id	component-injection
sidebar_label	Component injection
title	Component Injection
description	Component injection | React Patterns, techniques, tips and tricks in development for React developers.
keywords	component injection react component injection reactpatterns react patterns reactjspatterns reactjs patterns react reactjs react techniques react tips and tricks
version	Component injection
image	/img/reactpatterns-cover.png

What is Component Injection?

Passing (or inject) a component into another component it's called Component Injection.

Example 1

const Hello = ({ name }) => {
  return <div>`hello from ${name}`</div>
};

<Foo Hello={Hello} />

It look pretty much the same as in the function as prop component, except the prop we capitalize Hello because convention calls for us to capitalize the first letter of a component name. We also pass in props, an object, instead of a single string parameter, those are the only differences.

And Foo component will looks a lot more like a traditional React component.

const Foo = ({ Hello }) => {
  return <Hello name="foo" />
};

Example 2

Let's take a look at a advanced example, altered for component injection.

import React from 'react'

export default class PageWidth extends React.Component {
  state = { width: 100 }

  render() {
    const { width } = this.state
    const { Width } = this.props

    return <Width width={width} />
  }
}

So well as how you use it.

<PageWidth Width={DisplayPageWidthText} />

const DisplayWindowWidthText = ({ width }) => {
  return <div>window is {width}</div>
};

As you can see, the DisplayPageWidthText component is "injected" into PageWidth as a prop named Width.

You could even pass a different component and get a completely different rendered output, thanks to the power of render callback.

<PageWidth Width={DisplayDevice} />

const DisplayDevice = ({ width }) => {
  let device = null
  if (width <= 480) {
    device = 'mobile'
  } else if (width <= 768) {
    device = 'tablet'
  } else {
    device = 'desktop'
  }
  return <div>you are using a {device}</div>
}