React-semantify NPM

React-Semantify

Integrate Semantic-ui with react components. It depends on Semantic-UI and helps you use with react component.

Now the official Semantic-UI-React library is developing. I would maintain react-semantify until official library release v1. Welcome to provide your usage or suggestion to Semantic-UI-React

The components' Docs on the website - Pre-release

The components' Docs on the github

	React = 0.12	React = 0.13.*	React >= 0.14. && React <= 15.
Version	<= 0.2	0.3.*	>= 0.4.*

Usage

In Browser

Download js file

And then include in your html.

You should include dependency.

jQuery
Semantic-Ui
React
ReactDOM
Babel (If you write jsx in browser.)

Ex. Write a simple button in browser.

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.js"></script>
<script src="/vendors/react-semantify.js"></script>

<div id="content"></div>
<script type="text/babel">
  let Button = Semantify.Button;

  let HelloBox = React.createClass({

    _onClick: function () {
      console.log('hello world!');
    },

    render: function () {
      return (
        <Button color="red" onClick={this._onClick}>
          Hello World!
        </Button>
      );
    }
  });

  ReactDOM.render(
    <HelloBox />,
    document.getElementById('content')
  );
</script>

With Browserify or Webpack

npm install react-semantify

Ex.

import React from 'react';
import ReactDOM from 'react-dom';
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({

  _onClick: function () {
    console.log('hello world!');
  },

  render: function () {
    return (
      <Button color="red" onClick={this._onClick}>
        Hello World!
      </Button>
    );
  }
});

ReactDOM.render(
  <HelloBox />,
  document.getElementById('content')
);

And then you should include jQuery and semantic-ui in your browser.

Use cdnjs or bower

Use cdnjs

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.0.min.js">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.2.0/semantic.min.js">

Use bower