Using "if" directive in JSX

A easy-to-use "if" directive solution for front-end frameworks using JSX like React.

See Also:

• Using two-way data binding in JSX: babel-plugin-jsx-two-way-binding
• Using for-directive in JSX: babel-plugin-jsx-for-directive

1. Install

npm install --save-dev babel-plugin-jsx-if-directive

2. Basic Usage

Edit your .babelrc file:

1{
2  "plugins": [
3    "jsx-if-directive"
4  ]
5}

In your jsx file:

1class App extends Component {
2    constructor() {
3        super();
4    }
5
6    state = {
7        age: 0
8    }
9
10    plus = () => {
11        const { state: { age } } = this;
12        this.setState({ age: age + 10 });
13    }
14
15    render() {
16        const { age } = this.state;
17        return (
18            <div>
19                <button onClick={this.plus}>+</button>
20                <h1 if={age < 18}>You are child.</h1>
21                <h1 elseIf={age < 40}>You are youth.</h1>
22                <h1 elseIf={age < 60}>You are middle-aged.</h1>
23                <h1 else>You are old man.</h1>
24                <p>You are {age} years old</p>
25            </div>
26        )
27    }
28}

3. Usage with custom attribute name

Edit your .babelrc file:

1{
2  "plugins": [
3    "jsx-if-directive", 
4    { 
5      "ifAttrName": "r-if",
6      "elseAttrName": "r-else",
7      "elseIfAttrName": "r-elif"
8    }
9  ]
10}

In your jsx file:

1class App extends Component {
2    constructor() {
3        super();
4    }
5
6    state = {
7        age: 0
8    }
9
10    plus = () => {
11        const { state: { age } } = this;
12        this.setState({ age: age + 10 });
13    }
14
15    render() {
16        const { age } = this.state;
17        return (
18            <div>
19                <button onClick={this.plus}>+</button>
20                <h1 r-if={age < 18}>You are child.</h1>
21                <h1 r-elif={age < 40}>You are youth.</h1>
22                <h1 r-elif={age < 60}>You are middle-aged.</h1>
23                <h1 r-else>You are old man.</h1>
24                <p>You are {age} years old</p>
25            </div>
26        )
27    }
28}