Semantic
ReactAui is a small, lightweight glue library that integrates Semantic into React as properties, which feels more natural.
Aui is a tiny library, you can browse the docs/source code here!
Instead of many new React Components, all properties that === true are automatically translated into the className of each tag. Semantic Modules and other semantic javascript can be called as it was intended, like semantic's dropdowns, form validation, and even api.
JSFiddle around with the examples here!
// Set up Semantic's api module// http://semantic-ui.com/behaviors/api.htmlAui.$.fn.api.settings.method='POST'Aui.$.fn.api.settings.api={login: '/echo/json/?delay=2'}varExample=React.createClass({mixins: [Aui.Mixin],getInitialState: function(){return{data: {}}},render: function(){return(<divuicontainer><formref="login form"uisegmentform><labeluitopattachedlabel>{location.origin} login</label><divfield><divuiiconinput><inputtype="text"name="username"placeholder="Username"/><iusericon/></div></div><divfield><divuiiconinput><inputtype="password"name="password"placeholder="Password"/><iprivacyicon/></div></div><divfield>{/* checkbox={[]} will call $.fn.checkbox() */}<divuicheckbox={[]}><label>Remember Me</label><inputtype="checkbox"name="remember"/></div></div><divuierrormessage></div><divfield><divuibluesubmitbutton>Login</div></div></form></div>)},onSubmit: function(event){event.preventDefault()this.setState({data: this.$(event.target).form('get values')})},beforeSend: function(settings){// Merge with other React state as desired:settings.data=this.state.datareturnsettings},onLoggedIn: function(data){alert(this.state.data.username+" is logged in!")},componentDidMount: function(){// jQuery wrap by React ref:var$form=this.$("login form")// http://semantic-ui.com/behaviors/form.html.form({on: "change",inline: true,onSuccess: this.onSubmit,fields: {username: {identifier: "username",rules: [{type: "email",prompt: "Demo Username must be a valid email address (do not submit your real email)"}]},password: {identifier: "password",rules: [{type: "minLength[3]",prompt: "Demo Password must be 3 or more characters long (do not use a real password)"}]}}})// http://semantic-ui.com/behaviors/api.html.api({action: 'login',beforeSend: this.beforeSend,onSuccess: this.onLoggedIn,onError: function(error){$form.form('add errors',[error])}})}})React.render(<Example/>,document.getElementById('container'));This will result in something like this after React's render on the dom:
<body><divclass="ui container"><formclass="ui segment form"><labelclass="ui top attached label"> login</label><divclass="field"><divclass="ui icon input"><inputtype="text" name="username" placeholder="Username"/><iclass="user icon"/></div></div><divclass="field"><divclass="ui icon input"><inputtype="password" name="password" placeholder="Password"/><iclass="privacy icon"/></div></div><divclass="field"><divclass="ui checkbox"><label>Remember Me</label><inputtype="checkbox" name="remember" /></div></div><divclass="ui error message"></div><divclass="field"><divclass="ui blue submit button">Login</div></div></form></div></body>Make sure to include react.js, jquery.js, semantic.js, and semantic.css on your page
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.css" rel="stylesheet"></link><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script><scriptsrc="aui.js"></script>Aui is also available on Bower!
You may also may wish to use Browserify or some other CommonJS style bundler:
// If you wish to load Semantic, jQuery, and React from the window object:varAui=require('aui')// If you wish to bundle Semantic, jQuery, and ReactvarAui=require('aui/externals')If you use coffee-script and wish to go native:
Aui=require'aui/.coffee'# orAui=require'aui/externals.coffee'