Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evolify/babel-plugin-react-directive
Use directive in React.
https://github.com/evolify/babel-plugin-react-directive
Last synced: 3 months ago
JSON representation
Use directive in React.
- Host: GitHub
- URL: https://github.com/evolify/babel-plugin-react-directive
- Owner: evolify
- License: mit
- Created: 2018-08-29T07:44:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-06T01:54:05.000Z (about 1 year ago)
- Last Synced: 2024-07-17T19:56:22.595Z (4 months ago)
- Language: TypeScript
- Size: 22.5 KB
- Stars: 28
- Watchers: 3
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-babel - babel-plugin-react-directive - Use directive in React, for example, you can use `r-if`、`r-for` in jsx just as `v-if`、`v-for` in Vue. (Plugins / React)
README
# babel-plugin-react-directive
Use directive in React.
Now you can use `r-if`、`r-for` in jsx.
## Usage:
1. Install: `yarn add babel-plugin-react-directive --dev`
2. Add to your .babelrc:
```
{
plugins:[
'react-directive'
]
}
```
### r-if:
* Before:
```jsx
render(){
const visible = true
return(
{
visible ? content
: ''
}
)
}
```
* Now:
```jsx
render(){
const visible = true
return(
content
)
}
```
### r-for:
* Before:
```jsx
render(){
const list = [1, 2, 3, 4, 5]
return(
{
list.map((item,index)=>(
{item}
))
}
)
}
```
* Now:
```jsx
render(){
const list = [1, 2, 3, 4, 5]
return(
{/* auto set 'key' to the index */}
{item}
{/* or you can set the key manually */}
{item}
)
}
```