react-context-props

Decorate React Components so they can get context props as regular props.

How

import { getContextualizer, withPropsFromContext } from 'react-context-props'
import React from 'react'
import PropTypes from 'prop-types'
import { render } from 'react-dom'

function Text ({ children, color }) {
  return (
    <p color={color}>
      {children}
    </p>
  )
}

const ContextProps = getContextualizer({ color: PropTypes.string })
const TextWithColorFromContext = withPropsFromContext(['color'])(Text)

render(
  (
    <ContextProps color='red'>
      <div>
        <TextWithColorFromContext>
          This text will be red
        </TextWithColorFromContext>
      </div>
    </ContextProps>
  ),
  document.getElementById('main')
)

react-context-props comprises two functions (both higher order components):

• getContextualizer: allows you to generate a component that will receive certain props and put them in the React context. getContextualizer is called with a propTypes object describing the props that the resulting component will be able to recognize and put in the context.
• withPropsFromContext: decorates an already existing component so that the declared properties are captured from the React context and passed to it as regular props.

You don't need to use both of these functions: you can just use getContextualizer to generate components that can put props in the context and have components that are already aware of the context consuming those; or you can just use withPropsFromContext to decorate your components so that they can get certain props the regular way or from the context.

Putting everything from the Contextualizer into a single prop

getContextualizer can also be called like:

const ContextProps = getContextualizer(
  {
    background: PropTypes.string,
    color: PropTypes.string
  },
  'theme'
)

In this way, the prop in the React.context will be theme and it will contain an object with all the props passed to it. For example:

<ContextProps color='red' background='green'>
  …
</ContextProps>

…will set a theme prop in the React.context containing {color: 'red', background: 'green'}.

Install

npm install react-context-props

Advantages

• Explicit declaration of the properties that are expected to be received from context.
• Components that will receive properties from context can be implemented as regular components and the context wrapping added later. Component reusability is improved by using this strategy.

Useful for

• Making themeable components (main valid use case for React.context)

Testing

1. Clone this repo.
2. npm install
3. npm test

License

The Unlicense