Skip to content

Latest commit

 

History

History
230 lines (179 loc) · 9.6 KB

README.md

File metadata and controls

230 lines (179 loc) · 9.6 KB
Raw

React-Semantify

npm Dependency Status Build Status Coverage Status

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

bower install semantic-ui

Component

Comming Soon

Wait Semantic-UI Release.

  • Modules
    • Nag
    • Video

Release Notes

Release Notes

Contribute

devDependency Status

  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

License

MIT