gulp-react-to-vanilla-component
v0.4.15
Published
Wraps a react component within a thin web component, for use in vanillaJs and Polymer/lit-HTML projects
Downloads
10
Maintainers
Readme
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.
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')