html-jsx-loader
v0.1.17
Published
html loader module to convert HTML to JSX for webpack
Downloads
44
Readme
html-jsx-loader
Webpack loader module that exports HTML as React JSX class.
Usage
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 /> tagsReact 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.