I am trying to include Semantic UI with ES6 imports inside my React component.
I am using Grunt with Babel + Browserify.
I have already installed Semantic UI via NPM.
Here is Gruntfile browserify config:
grunt.initConfig({
browserify: {
dist: {
options: {
transform: [
['babelify', {
presets: ['es2015', 'react']
}]
],
watch: true
},
files: {
'./dist/app.js': ['./src/js/app.js']
}
}
},
I have created component like this:
import React from 'react'
import $ from 'jquery'
import dropdown from 'semantic-ui'
class Container extends React.Component {
constructor() {
super()
this.state = {
value: null
}
}
componentDidMount() {
$('.ui.selection.dropdown').dropdown({
dataType: 'jsonp',
apiSettings : {
onResponse: function(githubResponse) {
var
response = {
results : []
}
;
// translate github api response to work with dropdown
$.each(githubResponse.items, function(index, item) {
response.results.push({
name: item.name,
value: item.id
});
});
return response;
},
url: '//api.github.com/search/repositories?q={query}'
},
onChange: (value) => {
this.setState({
value
});
}
});
}
componentDidUpdate() {
$('.ui.dropdown').dropdown('refresh');
}
render() {
return (
<div>
<div>
<h2>Dropdown</h2>
<div className="ui fluid multiple search selection dropdown">
<input type="hidden" name="repo-ids" />
<div className="default text">Select Repos</div>
<i className="dropdown icon"></i>
<div className="menu">
</div>
</div>
</div>
<div>
<div className="ui divider"></div>
<b>Selected value</b> {this.state.value}
</div>
</div>
);
}
};
export default Container
However, when I try to compile this code, I get:
Error: Cannot find module 'semantic-ui'
Any help ? Do I need to setup browserify somehow, to compile Semantic UI ?
