1.0.7 • Published 7 years ago
babel-plugin-jsx-component-showing-controll v1.0.7
babel-plugin-jsx-component-showing-controll 1.0.6
Inspired by babel-plugin-jsx-if.
Showing current component or other component conditionally
Install
yarn add babel-plugin-jsx-component-showing-controll -D
Usage
.babelrc
{
...
"plugins": [
...,
"jsx-component-showing-controll"
]
}
Component.js
import React, { PureComponent } from 'react'
const InLoading = () => (<div>loading...</div>) // eslint-disable-line
export default class Component extends PureComponent {
render() {
return (
<div is-show={!this.props.loading} >
current component
</div>
)
}
// conver to
// (this.props.loading ? <InLoading /> : <div>current component </div>)
}
Showing custom tag instead of InLoading
import React, { PureComponent } from 'react'
const Loading = () => (<div>loading...</div>) // eslint-disable-line
export default class Component extends PureComponent {
render() {
return (
<div is-show={!this.props.loading} show-tag="Loading">
current component
</div>
)
}
// conver to
// (this.props.loading ? <Loading /> : <div>current component </div>)
}