❤
npm
Sign UpSign In

html-jsx-loader

0.1.17 • Public • Published

html-jsx-loader

Webpack loader module that exports HTML as React JSX class.

Usage

Documentation: Using loaders

Examples

Add the html-jsx-loader to your Webpack configuration:

{
    ...
    module: {
        loaders: [
            { test: /\.htm$/, loader: 'jsx-loader!imports?React=react!html-jsx-loader'}
        ]},
        resolve: {
            extensions: ['', '.js', '.htm']
        }
    }
    ...
}

Now you can write raw HTML (e.g. Introduction.htm) and webpack will automatically convert the content of this file to a React component.

Finally, you can reference this component in your JavaScript code as follows:

    var Introduction = require('./Introduction'); 
 
    //Introduction is not HTML but ReactJS class.

Advanced Usage

Grouping tags

If you would like the html-jsx-loader to group tags into separate react components, use the query group=true:

{
    ...
    module: {
        loaders: [
            { test: /\.htm$/, loader: 'jsx-loader!imports?React=react!html-jsx-loader?group=true'}
        ]},
        resolve: {
            extensions: ['', '.js', '.htm']
        }
    }
    ...
}

Then you can refer to your components like this:

    var Introduction = require('./Introduction');
    var Header = Introduction.Header;
    var Section = Introduction.Section;
 
    //Section will contain all <section /> tags

React Router integration

If you would like the html-jsx-loader to parse a tags to React Router Link tags, specify data-* inside your markup and the conversion will be done automatically:

<html>
    <body>
        <a data-style="[color: 'white']" data-activeStyle="[color: 'red']" data-to="user" data-params="[userId: user.id]" data-query="[foo: bar]">[user.name]</a>
    </body>
</html>
{
    ...
    module: {
        loaders: [
            { test: /\.htm$/, loader: 'jsx-loader!imports?React=react,Router=react-router,Link=>Router.Link!html-jsx-loader'}
        ]},
        resolve: {
            extensions: ['', '.js', '.htm']
        }
    }
    ...
}

The only required attribute is data-to. If not provided, the current a tag will remain unchanged.

Variable Replacement

If you would like the html-jsx-loader to replace a custom variable inside your HTML, create a variable in the format of __VARIABLE_NAME__ and add the desired replacement value as a query attribute to the loader. For Example:

<html>
  <body>
    <img src"__LOCATION__/image.png" />
  </body>
</html>
{
  ...
  module: {
    loaders: [
      { test: /\.htm$/, loader: 'jsx-loader!imports?React=react!html-jsx-loader?__LOCATION__=server'}
    ]},
    resolve: {
      extensions: ['', '.js', '.htm']
    }
  }
  ...
}

Then, the expected src path of the image tag will be: 'server/image.png'. If the query is not specified, the corresponding variable in the HTML will not change.

Dependents (0)

Package Sidebar

Install

npm i html-jsx-loader

Repository

github.com/HewlettPackard/html-jsx-loader

Homepage

github.com/HewlettPackard/html-jsx-loader

Weekly Downloads

4

Version

0.1.17

License

none

Last publish

Collaborators

  • alansouzati
  • ericsoderberg
Try on RunKit
Report malware