Package Exports

html-to-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-to-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

html-to-react-loader

A Webpack loader allowing imports of HTML files as there were React Components

Installation

As a command line tool:

npm install -g html-to-react-loader

Or as a Webpack loader:

npm install --save-dev html-to-react-loader

Demo: First name, last name component

user-component.jsx.html

<import path="./text-input" as="text-input" />

<template>
  <div>
    <div class="row">
      <span class="label" for="first-name">First name:</span>
      <span class="value">
        <text-input
          id="first-name"
          value="{{ props.firstName }}"
          on-change="{{ props.onFirstNameChange }}"
        />
      </span>
    </div>

    <div class="row">
      <span class="label" for="last-name">Last name:</span>
      <span class="value">
        <text-input
          id="last-name"
          value="{{ props.lastName }}"
          on-change="{{ props.onLastNameChange }}"
        />
      </span>
    </div>

    <div class="row">
      <span class="label">Full name:</span>
      <span class="value">{{ props.firstName }} {{ props.lastName }}</span>
    </div>
  </div>
</template>

user-container.jsx

'use strict';

import React, { Component } from 'react';
import UserComponent from './user-component';

export default class UserContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: ''
    };

    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
  }

  handleFirstNameChange(e) {
    e.preventDefault();
    this.setState({ firstName: e.target.value });
  }

  handleLastNameChange(e) {
    e.preventDefault();
    this.setState({ lastName: e.target.value });
  }

  render() {
    return (
      <UserComponent
        firstName={ this.state.firstName }
        lastName={ this.state.lastName }
        onFirstNameChange={ this.handleFirstNameChange }
        onLastNameChange={ this.handleLastNameChange }
      />
    );
  }
}

UserContainer.displayName = 'UserContainer';

Basic webpack.config.js

{
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx\.html$/,
        exclude: /node_modules/,
        loader: 'babel-loader!html-to-react'
      }
    ]
  },

  resolve: {
    extensions: [ '.jsx', '.jsx.html' ]
  }
}

Usage

Imports

Default import

Import a default component.

Usage

<import path as />

Attributes

path: Path to the file to import,
as: Tag name to use to reference the default component of the imported file.

Example

<import path="path/to/component" as="my-component" />

Is equivalent in ES2015 to

import MyComponent from 'path/to/component';

Named imports

Import a component by its name. The import tag for a named import must be child of an other import tag having a path attribute.

Usage

<import path>
  <import name as />
</import>

Attributes

path: Path to the file to import,
name: Name of the component to import,
as: Tag name to use to reference the component.

Example

<import path="path/to/component">
  <import name="ANamedImport" as="a-named-import" />
  <import name="AnohterNamedImport" as="second-component" />
</import>

Is equivalent in ES2015 to

import {
  ANamedImport as ANamedImport,
  AnohterNamedImport as SecondComponent
} from 'path/to/component';

Default and named imports

Import the default and some named components from the same file.

Usage

<import path as>
  <import name as />
</import>

Attributes

See default imports and Named imports.

Example

<import path="path/to/component" as="my-component">
  <import name="ANamedImport" as="a-named-import" />
  <import name="AnohterNamedImport" as="second-component" />
</import>

Is equivalent in ES2015 to

import MyComponent, {
  ANamedImport as ANamedImport,
  AnohterNamedImport as SecondComponent
} from 'path/to/component';

Templates

A template is an HTML node containing a single root child.

Default template

Each file must contain only one default template. A default template cannot be named, it is the entry point of the file.

Usage

<template>
  <!-- Content -->
</template>

Attributes

None.

Example

<template>
  <div>Hello World</div>
</template>

Is equivalent in React to

export default function() {
  return (
    <div>Hello World</div>
  );
}

Named templates

A named template is simply a template with a name attribute, which means it can be used by referencing its name. All named templates will be exported under their given name.

Usage

<template name>
  <!-- Content -->
</template>

Attributes

name: Tag name to use to reference this template.

Example

<template name="named-template">
  <!-- ...  -->
</template>

<template>
  <!-- ...  -->
  <named-template />
  <!-- ...  -->
</template>

Is equivalent in React to

export function NamedTemplate(props) {
  return (
    // ...
  );
}

export default function(props) {
  return (
    // ...

    <NamedTemplate />

    // ...
  );
}

Loops

A loop will repeat its content for each element in the array. The repeate tag can only have one child.

Usage

<repeat for-each as>
  <!-- Content -->
</repeat>

Attributes

for-each: Array of data,
as: Name of variable to use for each element.

Example

<template>
  <div class="users">
    <repeat for-each="{{ props.users }}" as="user">
      <div key="{{ user.id }}">{{ user.name }}</div>
    </repeat>
  </div>
</template>

Is equivalent in React to

export default function(props) {
  return (
    <div className="users">
      { props.users.map(user => (
        <div key={ user.id }>
          {{ user.name }}
        </div>
      )) }
    </div>
  );
}

Conditionals

A conditional will render its content depending on a condition. The render tag can only have one child.

Usage

<render if>
  <!-- Content -->
</render>

Attributes

if: Condition to fulfill for the content to be rendered.

Example

<template>
  <div class="user">
    <render if="{{ props.user }}">
      <div>{{ props.user.name }}</div>
    </render>
  </div>
</template>

Is equivalent in React to

export default function(props) {
  return (
    <div className="user">
      { (props.user) && (
        <div>{{ props.user.name }}</div>
      ) }
    </div>
  );
}