diff --git a/dist/react-chartjs.js b/dist/react-chartjs.js
new file mode 100644
index 0000000..a32b88d
--- /dev/null
+++ b/dist/react-chartjs.js
@@ -0,0 +1,247 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("Chartjs"), require("react"));
+	else if(typeof define === 'function' && define.amd)
+		define(["Chartjs", "react"], factory);
+	else if(typeof exports === 'object')
+		exports["react-chartjs"] = factory(require("Chartjs"), require("react"));
+	else
+		root["react-chartjs"] = factory(root["Chartjs"], root["React"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = {
+	  Bar: __webpack_require__(1),
+	  Doughnut: __webpack_require__(2),
+	  Line: __webpack_require__(3),
+	  Pie: __webpack_require__(4),
+	  PolarArea: __webpack_require__(5),
+	  Radar: __webpack_require__(6),
+	  createClass: __webpack_require__(7).createClass
+	};
+
+
+/***/ },
+/* 1 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('Bar', ['getBarsAtEvent']);
+
+
+/***/ },
+/* 2 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('Doughnut', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('Line', ['getPointsAtEvent']);
+
+
+/***/ },
+/* 4 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('Pie', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 5 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('PolarArea', ['getSegmentsAtEvent']);
+
+
+/***/ },
+/* 6 */
+/***/ function(module, exports, __webpack_require__) {
+
+	var vars = __webpack_require__(7);
+
+	module.exports = vars.createClass('Radar', ['getPointsAtEvent']);
+
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = {
+	  createClass: function(chartType, methodNames, dataKey) {
+	    var classData = {
+	      displayName: chartType + 'Chart',
+	      getInitialState: function() { return {}; },
+	      render: function() {
+	        var _props = {
+	          ref: 'canvass'
+	        };
+	        for (var name in this.props) {
+	          if (this.props.hasOwnProperty(name)) {
+	            if (name !== 'data' && name !== 'options') {
+	              _props[name] = this.props[name];
+	            }
+	          }
+	        }
+	        return React.createElement('canvas', _props);
+	      }
+	    };
+
+	    var extras = ['clear', 'stop', 'resize', 'toBase64Image', 'generateLegend', 'update', 'addData', 'removeData'];
+	    function extra(type) {
+	      classData[type] = function() {
+	        this.state.chart[name].apply(this.state.chart, arguments);
+	      };
+	    }
+
+	    classData.componentDidMount = function() {
+	      this.initializeChart(this.props);
+	    };
+
+	    classData.componentWillUnmount = function() {
+	      var chart = this.state.chart;
+	      chart.destroy();
+	    };
+
+	    classData.componentWillReceiveProps = function(nextProps) {
+	      var chart = this.state.chart;
+	      if (this.props.redraw) {
+	        chart.destroy();
+	        this.initializeChart(nextProps);
+	      } else {
+	        dataKey = dataKey || dataKeys[chart.name];
+	        updatePoints(nextProps, chart, dataKey);
+	        chart.update();
+	      }
+	    };
+
+	    classData.initializeChart = function(nextProps) {
+	      var Chart = __webpack_require__(8);
+	      var el = this.getDOMNode();
+	      var ctx = el.getContext("2d");
+	      var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
+	      this.state.chart = chart;
+	    };
+
+	    // return the chartjs instance
+	    classData.getChart = function() {
+	      return this.state.chart;
+	    };
+
+	    // return the canvass element that contains the chart
+	    classData.getCanvass = function() {
+	      return this.refs.canvass.getDOMNode();
+	    };
+
+	    var i;
+	    for (i=0; i<extras.length; i++) {
+	      extra(extras[i]);
+	    }
+	    for (i=0; i<methodNames.length; i++) {
+	      extra(methodNames[i]);
+	    }
+
+	    var React = __webpack_require__(9);
+	    return React.createClass(classData);
+	  }
+	};
+
+	var dataKeys = {
+	  'Line': 'points',
+	  'Radar': 'points',
+	  'Bar': 'bars'
+	};
+
+	var updatePoints = function(nextProps, chart, dataKey) {
+	  var name = chart.name;
+
+	  if (name === 'PolarArea' || name === 'Pie' || name === 'Doughnut') {
+	    nextProps.data.forEach(function(segment, segmentIndex) {
+	      chart.segments[segmentIndex].value = segment.value;
+	    });
+	  } else {
+	    nextProps.data.datasets.forEach(function(set, setIndex) {
+	      set.data.forEach(function(val, pointIndex) {
+	        chart.datasets[setIndex][dataKey][pointIndex].value = val;
+	      });
+	    });
+	  }
+	};
+
+
+
+
+
+
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+
+/***/ },
+/* 9 */
+/***/ function(module, exports, __webpack_require__) {
+
+	module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
+
+/***/ }
+/******/ ])
+});
+;
\ No newline at end of file
diff --git a/dist/react-chartjs.min.js b/dist/react-chartjs.min.js
new file mode 100644
index 0000000..381b6e2
--- /dev/null
+++ b/dist/react-chartjs.min.js
@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("Chartjs"),require("react")):"function"==typeof define&&define.amd?define(["Chartjs","react"],e):"object"==typeof exports?exports["react-chartjs"]=e(require("Chartjs"),require("react")):t["react-chartjs"]=e(t.Chartjs,t.React)}(this,function(t,e){return function(t){function e(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return t[r].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var a={};return e.m=t,e.c=a,e.p="",e(0)}([function(t,e,a){t.exports={Bar:a(1),Doughnut:a(2),Line:a(3),Pie:a(4),PolarArea:a(5),Radar:a(6),createClass:a(7).createClass}},function(t,e,a){var r=a(7);t.exports=r.createClass("Bar",["getBarsAtEvent"])},function(t,e,a){var r=a(7);t.exports=r.createClass("Doughnut",["getSegmentsAtEvent"])},function(t,e,a){var r=a(7);t.exports=r.createClass("Line",["getPointsAtEvent"])},function(t,e,a){var r=a(7);t.exports=r.createClass("Pie",["getSegmentsAtEvent"])},function(t,e,a){var r=a(7);t.exports=r.createClass("PolarArea",["getSegmentsAtEvent"])},function(t,e,a){var r=a(7);t.exports=r.createClass("Radar",["getPointsAtEvent"])},function(t,e,a){t.exports={createClass:function(t,e,s){function o(t){i[t]=function(){this.state.chart[name].apply(this.state.chart,arguments)}}var i={displayName:t+"Chart",getInitialState:function(){return{}},render:function(){var t={ref:"canvass"};for(var e in this.props)this.props.hasOwnProperty(e)&&"data"!==e&&"options"!==e&&(t[e]=this.props[e]);return p.createElement("canvas",t)}},c=["clear","stop","resize","toBase64Image","generateLegend","update","addData","removeData"];i.componentDidMount=function(){this.initializeChart(this.props)},i.componentWillUnmount=function(){var t=this.state.chart;t.destroy()},i.componentWillReceiveProps=function(t){var e=this.state.chart;this.props.redraw?(e.destroy(),this.initializeChart(t)):(s=s||r[e.name],n(t,e,s),e.update())},i.initializeChart=function(e){var r=a(8),n=this.getDOMNode(),s=n.getContext("2d"),o=new r(s)[t](e.data,e.options||{});this.state.chart=o},i.getChart=function(){return this.state.chart},i.getCanvass=function(){return this.refs.canvass.getDOMNode()};var u;for(u=0;u<c.length;u++)o(c[u]);for(u=0;u<e.length;u++)o(e[u]);var p=a(9);return p.createClass(i)}};var r={Line:"points",Radar:"points",Bar:"bars"},n=function(t,e,a){var r=e.name;"PolarArea"===r||"Pie"===r||"Doughnut"===r?t.data.forEach(function(t,a){e.segments[a].value=t.value}):t.data.datasets.forEach(function(t,r){t.data.forEach(function(t,n){e.datasets[r][a][n].value=t})})}},function(e){e.exports=t},function(t){t.exports=e}])});
\ No newline at end of file
diff --git a/package.json b/package.json
index b189db3..46273a1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "description": "react charting components using the chartjs lib",
   "main": "index.js",
   "scripts": {
-    "test": "mocha"
+    "test": "mocha",
+    "build": "webpack index.js dist/react-chartjs.js",
+    "dist": "COMPRESS=1 webpack index.js dist/react-chartjs.min.js"
   },
   "repository": {
     "type": "git",
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..d1101e6
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,44 @@
+var webpack = require('webpack'),
+    plugins = [];
+
+if (process.env.COMPRESS) {
+    plugins.push(
+        new webpack.optimize.UglifyJsPlugin({
+            compressor: {
+                warnings: false
+            }
+        })
+    );
+}
+
+module.exports = {
+
+    output: {
+        library: 'react-chartjs',
+        libraryTarget: 'umd'
+    },
+
+    externals: [
+        {
+            "react": {
+                root: "React",
+                commonjs2: "react",
+                commonjs: "react",
+                amd: "react"
+            },
+            "chart.js": {
+                root: "Chartjs",
+                commonjs2: "Chartjs",
+                commonjs: "Chartjs",
+                amd: "Chartjs"
+            }
+        }
+    ],
+
+    node: {
+        Buffer: false
+    },
+
+    plugins: plugins
+
+};