# babel-plugin-react-directive

> Use directives in React.

Latest version **0.2.1** (published 2022-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install babel-plugin-react-directive
pnpm add babel-plugin-react-directive
yarn add babel-plugin-react-directive
bun add babel-plugin-react-directive
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2022-06-02 |
| First published | 2018-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30 |
| Author | 孤狼 |
| Maintainers | evolify |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-react-directive
- Repository: https://github.com/evolify/babel-plugin-react-directive
- Homepage: https://github.com/evolify/babel-plugin-react-directive#readme
- Issues: https://github.com/evolify/babel-plugin-react-directive/issues
- npm.io page: https://npm.io/package/babel-plugin-react-directive

## Dependencies (1)

- [@babel/types](https://npm.io/package/@babel/types.md) ^7.18.4

## Recent versions

- 0.2.1 (latest) — 2022-06-02
- 0.2.0 — 2022-06-02
- 0.1.1 — 2018-08-29
- 0.1.0 — 2018-08-29

## 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(
          <div>
              {
                  visible ? <div>content<div>
                          : ''
              }
          </div>
      )
  }
  ```

  

* Now:

  ```jsx
  render(){
      const visible = true
      return(
          <div>
              <div r-if = {visible}>content</div>
          </div>
      )
  }
  ```



### r-for:

* Before:

  ```jsx
  render(){
      const list = [1, 2, 3, 4, 5]
      return(
          <div>
              {
                  list.map((item,index)=>(
                  	<div key={index}>{item}</div>
                  ))
              }
          </div>
      )
  }
  ```

  

* Now:

  ```jsx
  render(){
      const list = [1, 2, 3, 4, 5]
      return(
          <div>
              {/* auto set 'key' to the index */} 
              <div r-for = {item in list}>{item}</div>
              {/* or you can set the key manually */}
              <div r-for = {(item,index) in list} key = {index+1}>{item}</div>
          </div>
      )
  }
  ```

---
_Source: https://npm.io/package/babel-plugin-react-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._