/babel-plugin-react-directive

Use directive in React.

Primary LanguageTypeScriptMIT LicenseMIT

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:

    render(){
    const visible = true
    return(
        <div>
            {
                visible ? <div>content<div>
                        : ''
            }
        </div>
    )
}

  • Now:

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

r-for:

  • Before:

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

  • Now:

    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>
    )
}