https://github.com/darmody/babel-transform-jsx-component-showing-controll
Showing current component or other component conditionally
https://github.com/darmody/babel-transform-jsx-component-showing-controll
babel conditional jsx plugin
Last synced: about 1 month ago
JSON representation
Showing current component or other component conditionally
- Host: GitHub
- URL: https://github.com/darmody/babel-transform-jsx-component-showing-controll
- Owner: Darmody
- Created: 2017-03-04T12:13:28.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-03-10T07:17:48.000Z (about 9 years ago)
- Last Synced: 2025-10-23T08:52:47.453Z (7 months ago)
- Topics: babel, conditional, jsx, plugin
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## babel-plugin-jsx-component-showing-controll
v1.0.7
Inspired by [babel-plugin-jsx-if](https://github.com/motion/babel-transform-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
```jsx
import React, { PureComponent } from 'react'
// Or require it globally
const InLoading = () => (
loading...) // eslint-disable-line
export default class Component extends PureComponent {
render() {
return (
current component
)
}
// conver to
// (this.props.loading ? : current component )
}
```
Showing custom tag instead of InLoading
```jsx
import React, { PureComponent } from 'react'
const Loading = () => (
loading...) // eslint-disable-line
export default class Component extends PureComponent {
render() {
return (
current component
)
}
// conver to
// (this.props.loading ? : current component )
}
```
### Use case
* loading display
* permission controll
* other conditional component display case