gulp-react-to-vanilla-component v0.4.15

gulp-react-to-vanilla-component

Wraps a react component within a thin web component, for use in vanillaJs. You can then insert it within the DOM, treating the react component as if it was just another standard W3C standard custom element.

More detailed tutorial here

You can use it within your gulp process like this:

const reactToVanilla = require('gulp-react-to-vanilla-component');

function _compileJS(glob) {
  return gulp.src(glob, {base: '.'})
    .pipe(babel({
      plugins: [
        'babel-plugin-transform-import-resolve',
        'babel-plugin-transform-react-jsx'
      ]
    }))
    .pipe(reactToVanilla('Component', 'react'))
    .pipe(gulp.dest(configs.build.devFldr))
}

Options

• Name of React class to Extend. Default is React.Component, but you many choose another name.
• Name of suffix for browser complient '-' naming convection. Default is component

class MyReact extends Component {}

The above would require calling this plugin with

.pipe(reactToVanilla('Component')

If you wanted your custom component to be accessed by:

<myreact-comp></myreact-comp>

you would call like this:

.pipe(reactToVanilla('Component', 'comp')