gulp-html-to-react

A Gulp plugin to turn HTML into React component with embedded React code.

Based on reactjs/react-magic.

Table of Contents

• Install
• Usage
• Embendding React code in HTML
• Options
• License

Install

$ npm i -D gulp-html-to-react

Or:

$ npm install --save-dev gulp-html-to-react

Usage

'use strict';

var toreact     = require('gulp-html-to-react'),
    diff        = require('gulp-diff-build');

module.exports = function(gulp,config){

    gulp.task(config.task,function(){

        gulp.src(config.src) // ,{buffer:false}) // Caution ! Diff not working in stream mode
            .pipe(toreact(config.opts))
            .pipe(diff({clean:true,hash:config.task}))
            .pipe(gulp.dest(config.dst));

    });

};

Used with stream or buffer. See gulp.src/options.buffer

Embedding React code in HTML

A special tag can be used to write React code embedded in an HTML document.

<?REACT...?>

Example:

<button class="square" onclick="<?REACT() => alert('click')?>">
    <?REACTthis.props.value?>
</button>

Giving:

<button className="square" onclick={() => alert('click')}>
    {this.props.value}
</button>

Options

indent

Type: string Default value: \t

Character(s) to be used for indenting the component.

encoding

Type: string Default value: utf8

Type of the encoding for the output.

ext

Type: string Default value: null

The extension for the output file. When null, the extension remain the same as the input file.

style

Type: integer Default value: 0

The style to be used to create the component.

Values:

• 0: React.Component (~ v16.2.0)
• 1: React.createClass (~ v15.6.2)
• 2: var
• 3: createReactClass (create-react-class needed)

License

MIT © guitarneck