ES6 module import error fix #14

README.md

@@ -66,7 +66,7 @@ Ex. Write a simple button in browser.
 </script>
 ```
 
-### With Browserify
+### With Browserify or Webpack
 
 ```sh
 npm install react-semantify
@@ -76,7 +76,13 @@ Ex.
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
-let Button = require('react-semantify').Button;
+import {Button} from 'react-semantify';
+// or
+// import * as Semantify from 'react-semantify';
+// let {Button} = Semantify;
+// or
+// use ES5
+// let Button = require('react-semantify').Button;
 
 let HelloBox = React.createClass({
 

src/collections/breadcrumb.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui breadcrumb';
 
-module.exports = React.createClass({
+const Breadcrumb = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Breadcrumb;

src/collections/form.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui form';
 
-module.exports = React.createClass({
+const Form = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Form;

src/collections/grid.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui grid';
 
-module.exports = React.createClass({
+const Grid = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Grid;

src/collections/menu.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui menu';
 
-module.exports = React.createClass({
+const Menu = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Menu;

src/collections/message.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui message';
 
-module.exports = React.createClass({
+const Message = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Message;

src/collections/table.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui table';
 
-module.exports = React.createClass({
+const Table = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Table;

src/commons/column.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'column';
 
-module.exports = React.createClass({
+const Column = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Column;

src/commons/content.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import StateSelector from '../mixins/stateSelector';
-import Unit from './unit';
+import {Unit} from './unit';
 
 let defaultClassName = 'content';
 
-module.exports = React.createClass({
+const Content = React.createClass({
 
   mixins: [ClassGenerator, StateSelector],
 
@@ -24,3 +24,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Content;

src/commons/field.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'field';
 
-module.exports = React.createClass({
+const Field = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Field;

src/commons/fields.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'fields';
 
-module.exports = React.createClass({
+const Fields = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Fields;

src/commons/row.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'row';
 
-module.exports = React.createClass({
+const Row = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Row;

src/commons/section.js

@@ -2,11 +2,11 @@ import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import ColorSelector from '../mixins/colorSelector';
 import TypeSelector from '../mixins/typeSelector';
-import Unit from './unit';
+import {Unit} from './unit';
 
 let defaultClassName = 'section';
 
-module.exports = React.createClass({
+const Section = React.createClass({
 
   mixins: [ClassGenerator, ColorSelector, TypeSelector],
 
@@ -24,3 +24,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Section;

src/commons/text.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'text';
 
-module.exports = React.createClass({
+const Text = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -18,3 +18,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Text;

src/commons/title.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import StateSelector from '../mixins/stateSelector';
-import Unit from './unit';
+import {Unit} from './unit';
 
 let defaultClassName = 'title';
 
-module.exports = React.createClass({
+const Title = React.createClass({
 
   mixins: [ClassGenerator, StateSelector],
 
@@ -24,3 +24,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Title;

src/commons/unit.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classSet from 'classnames';
 
-module.exports = React.createClass({
+export const Unit = React.createClass({
 
   propTypes: {
     className: React.PropTypes.string.isRequired,

src/elements/button.js

@@ -2,11 +2,11 @@ import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import ColorSelector from '../mixins/colorSelector';
 import StateSelector from '../mixins/stateSelector';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'ui button';
 
-module.exports = React.createClass({
+const Button = React.createClass({
 
   mixins: [ClassGenerator, ColorSelector, StateSelector],
 
@@ -27,3 +27,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Button;

src/elements/divider.js

@@ -3,7 +3,7 @@ import ClassGenerator from '../mixins/classGenerator';
 
 let defaultClassName = 'ui divider';
 
-module.exports = React.createClass({
+const Divider = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -15,3 +15,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Divider;

src/elements/flag.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'flag';
 
-module.exports = React.createClass({
+const Flag = React.createClass({
 
   mixins: [ClassGenerator],
 
@@ -21,3 +21,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Flag;

src/elements/header.js

@@ -3,11 +3,11 @@ import ClassGenerator from '../mixins/classGenerator';
 import ColorSelector from '../mixins/colorSelector';
 import TypeSelector from '../mixins/typeSelector';
 import StateSelector from '../mixins/stateSelector';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'ui header';
 
-module.exports = React.createClass({
+const Header = React.createClass({
 
   mixins: [ClassGenerator, ColorSelector, TypeSelector, StateSelector],
 
@@ -26,3 +26,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Header;

src/elements/icon.js

@@ -2,11 +2,11 @@ import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import ColorSelector from '../mixins/colorSelector';
 import StateSelector from '../mixins/stateSelector';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'icon';
 
-module.exports = React.createClass({
+const Icon = React.createClass({
 
   mixins: [ClassGenerator, ColorSelector, StateSelector],
 
@@ -25,3 +25,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Icon;

src/elements/image.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import StateSelector from '../mixins/stateSelector';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'ui image';
 
-module.exports = React.createClass({
+const Image = React.createClass({
 
   mixins: [ClassGenerator, StateSelector],
 
@@ -24,3 +24,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+export default Image;

src/elements/input.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ClassGenerator from '../mixins/classGenerator';
 import StateSelector from '../mixins/stateSelector';
-import Unit from '../commons/unit';
+import {Unit} from '../commons/unit';
 
 let defaultClassName = 'ui input';
 
-module.exports = React.createClass({
+const Input = React.createClass({
 
   mixins: [ClassGenerator, StateSelector],
 
@@ -43,3 +43,5 @@ module.exports = React.createClass({
 
   }
 });
+
+export default Input;