babel-plugin-jsx-adopt

This plugin transforms adopt calls to render props. Idea based on this gist. ⚠️ Experimental: Code you are likely to write should be transformed just fine, convoluted/edge cases might not be covered yet.

Example

Input

const Example = () => {
  const theme = adopt(<Theme />)
  const counter = adopt(<Counter />)
  const toggle = adopt(<Toggle />)
 
  return (
    <div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
      <span>{`Count: ${counter}`}</span>
      <button onClick={toggle}>{'Toggle'}</button>
    </div>
  )
}

Output

const Example = () => {
  return (
    <Theme>
      {theme => (
        <Counter>
          {counter => (
            <Toggle>
              {toggle => (
                <div style={{ color: theme === 'light' ? '#000' : '#fff' }}>
                  <span>{`Count: ${counter}`}</span>
                  <button onClick={toggle}>{'Toggle'}</button>
                </div>
              )}
            </Toggle>
          )}
        </Counter>
      )}
    </Theme>
  )
}

Installation

npm install --save-dev babel-plugin-jsx-adopt

If you want to use it with babel@7, you should also install babel-core@^7.0.0-0 (just to prevent peer dep warnings).

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["babel-plugin-jsx-adopt"]
}

Via CLI

babel --plugins babel-plugin-jsx-adopt script.js

Via Node API

require('babel-core').transform('code', {
  plugins: ['babel-plugin-jsx-adopt'],
})