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
.babelrc
(Recommended)
Via .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'],
})