# gulp-react-to-vanilla-component

> Wraps a react component within a thin web component, for use in vanillaJs and Polymer/lit-HTML projects

Latest version **0.4.15** (published 2018-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-react-to-vanilla-component
pnpm add gulp-react-to-vanilla-component
yarn add gulp-react-to-vanilla-component
bun add gulp-react-to-vanilla-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.15 |
| Published | 2018-09-28 |
| First published | 2018-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0 |
| Dependencies | 1 |
| Unpacked size | 3.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Davis Hammon |
| Maintainers | risingtiger42 |
| Keywords | react, javascript, web components, es6, convert |

## Links

- npm: https://www.npmjs.com/package/gulp-react-to-vanilla-component
- Repository: https://github.com/risingtiger/gulp-react-to-vanilla-component
- Homepage: https://github.com/risingtiger/gulp-react-to-vanilla-component#readme
- Issues: https://github.com/risingtiger/gulp-react-to-vanilla-component/issues
- npm.io page: https://npm.io/package/gulp-react-to-vanilla-component

## Dependencies (1)

- [through2](https://npm.io/package/through2.md) ^2.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.15 (latest) — 2018-09-28
- 0.4.12 — 2018-09-28
- 0.4.11 — 2018-09-28
- 0.4.9 — 2018-09-28
- 0.4.8 — 2018-09-27
- 0.4.7 — 2018-09-26
- 0.4.6 — 2018-09-26

## 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.

[More detailed tutorial here](https://medium.com/@risingtiger42/using-react-in-vanilla-web-components-5a60575a8148)

You can use it within your gulp process like this:

```javascript
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

```javascript
class MyReact extends Component {}
```

The above would require calling this plugin with 

```javascript
.pipe(reactToVanilla('Component')
```

If you wanted your custom component to be accessed by:

```html
<myreact-comp></myreact-comp>
```

you would call like this:

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

---
_Source: https://npm.io/package/gulp-react-to-vanilla-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._