babel-plugin-react-v-html

babel-plugin-react-v-html

Babel plugin for React component to transform the JSXAttribute from v-html to dangerouslySetInnerHTML.

Installation

$ npm install babel-plugin-react-v-html --save-dev

Motivation

When you use of the innerHTML in React, you usually use the dangerouslySetInnerHTML of JSXAttribute. But it is too long and complex, like this

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
        html: `<h1>dangerouslySetInnerHTML is bad</h1>`
    }
  }
 
  render() {
    const html = this.state;

    return (
      <div dangerouslySetInnerHTML={{__html: html}} />
    )
  }
}

It's so troublesome, although It wants to warn you the innerHTML is dangerous because the innerHTML can open you up to a cross-site scripting (XSS) attack. So, this plugin is born to resolve this problem. With this plugin, you can easily code.

Instead,

class App extends React.Component{
  constructor(props){
    super(props);

    this.state = {
        html: `<h1>v-html is awesome</h1>`
    }
  }
  
  render() {
    const html = this.state;

    return (
      <div v-html={html} />
    )
  }
}

Usage

Write via babelrc.

// .babelrc
{
  "plugins": [
      "react-v-html"
  ]
}