[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![chat][chat]][chat-url]

src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon.svg">

React Proxy Loader

Wraps a react component in a proxy component to enable Code Splitting (loads a react component and its dependencies on demand).

Install

``bash
npm install react-proxy-loader
``

Usage

Documentation: Using loaders

` js
var Component = require("react-proxy-loader!./Component");
// => returns the proxied component (It loads on demand.)
// (webpack creates an additional chunk for this component and its dependencies)

var ComponentProxyMixin = require("react-proxy-loader!./Component").Mixin;
// => returns a mixin for the proxied component
// (This allows you to setup rendering for the loading state for the proxy)
var ComponentProxy = React.createClass({
mixins: [ComponentProxyMixin],
renderUnavailable: function() {
return

Loading...

` js
module.exports = {
module: {
loaders: [
/ ... /
{
test: [
/component\.jsx$/, // select component by RegExp
/\.async\.jsx$/, // select component by extension
"/abs/path/to/component.jsx" // absolute path to component
],
loader: "react-proxy-loader"
}
]
}
};
`

$3

You can give the chunk a name with the name query parameter:

` js
var Component = require("react-proxy-loader?name=chunkName!./Component");
``

Maintainers

src="https://avatars3.githubusercontent.com/u/166921?v=3&s=150"> Juho Vepsäläinen

src="https://avatars2.githubusercontent.com/u/8420490?v=3&s=150"> Joshua Wiens

src="https://avatars3.githubusercontent.com/u/533616?v=3&s=150"> Kees Kluskens

src="https://avatars3.githubusercontent.com/u/3408176?v=3&s=150"> Sean Larkin

[npm]: https://img.shields.io/npm/v/react-proxy-loader.svg
[npm-url]: https://npmjs.com/package/react-proxy-loader

[deps]: https://david-dm.org/webpack-contrib/react-proxy-loader.svg
[deps-url]: https://david-dm.org/webpack-contrib/react-proxy-loader

[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
[chat-url]: https://gitter.im/webpack/webpack