A Jade to React js loader module for Webpack
JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.babelrc
.eslintrc
.gitignore
.npmignore
README.md
index.js
package.json

README.md

Jade to React JS loader for Webpack

npm package

PreRequisites

  • React & Webpack are peerDependencies (will be installed automatically with npm 2 but left to end-user under npm 3)

Usage

Like any loader can be set up in a configuration file but to use in a require statement:

var React = require("react");

var template = require("jade-react!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: template
});

Passing Arguments to templates

  • If locals is an object specifying the components props you can then render the template on the page like so:
React.render(React.createElement(JadeComponent, locals), document.getElementById("reactivePlace"));
  • OR by passing options through the loader
var React = require("react");

// pass options as json
var template = require("jade-react?{locals: {}, basedir: "", pretty: true}!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: template
});
  • OR by passing arguments directly to the template function
  • For example if you are using the css-loader (and style-loader) to create modular CSS packages
    • typical webpack config:
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]'
      }
    ]
  }
  • then you could pass these styles to your jade template like so:
var React = require("react");
var styles = require('./template.css');

var template = require("jade-react!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: function () {
        return template({styles: styles})
    }
});
  • where they could be referenced as class names:
section(className=styles.content)
  h1 Hey There!

More Info

  • A simple example app (using ES6 syntax) can be seen at jade-react-loader-example

  • Loader uses the react-jade package and Jade templates are subject to the same limitations as listed there.

Acknowledgements

  • Thanks to kilokeith for valuable contributions