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

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

bower install semantic-ui

Component

• Elements

  • Button
  • Divider
  • Container
  • Flag
  • Header
  • Icon
  • Image
  • Input
  • Label
  • List
  • Loader
  • Rail - Pre-release
  • Reveal - Pre-release
  • Segment
  • Steps/Step - Pre-release

• Collections

  • Breadcrumb - Pre-release
  • Form - Pre-release
  • Grid - Pre-release
  • Menu - Pre-release
  • Message - Pre-release
  • Table - Pre-release

• Views

  • Advertisement - Pre-release
  • Card - Pre-release
  • Comments/Comment - Pre-release
  • Feed - Pre-release
  • Items/Item - Pre-release
  • Statistic - Pre-release

• Modules

  • Accordion
  • Checkbox
  • Dimmer
  • Dropdown
  • Embed
  • Modal
  • Popup - Pre-release
  • Progress
  • Rating
  • Search
  • Shape
  • Sidebar
  • Sticky
  • Tab

Comming Soon

Wait Semantic-UI Release.

• Modules
  • Nag
  • Video

Release Notes

Release Notes

Contribute

1. Fork it.
2. Create your feature-branch git checkout -b your-new-feature-branch
3. Commit your change git commit -am 'Add new feature'
4. Push to the branch git push origin your-new-feature-branch
5. Create new Pull Request with master branch

Commit Message Style

Now Commit message style following angular.

Run Test

• git clone [email protected]:jessy1092/react-semantify.git
• npm i
• npm test

License

MIT