/babel-plugin-react-directive

Use directive in React.

Primary LanguageTypeScriptMIT LicenseMIT

babel-plugin-react-directive

Use directive in React.

Now you can use r-ifr-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>
        )
    }