react-semantify 0,0,0 editorconfig travis-ci npm

Integrate Semantic-ui with react components.

3 years after MIT

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

Related Repositories

semantic-react

semantic-react

React components for Semantic UI ...

semantic-react

semantic-react

React components for Semantic UI ...


Top Contributors

jessy1092 b0gok denisjacquemin mrkam

Dependencies

package version
dev babel ^6.5.2
babel-core ^6.14.0
babel-jest ^15.0.0
babel-preset-es2015 ^6.14.0
babel-preset-react ^6.11.1
babel-preset-stage-0 ^6.5.0
babelify ^7.2.0
browserify ^13.0.0
browserify-global-shim ^1.0.0
coveralls ^2.11.9
gulp git://github.com/gulpjs/gulp.git#4.0
gulp-babel ^6.1.0
gulp-rename ^1.2.2
gulp-uglify ^1.5.1
gulp-util ^3.0.7
jest-cli ^15.1.1
react ^15.3.0
react-addons-test-utils ^15.3.0
react-dom ^15.3.0
vinyl-buffer ^1.0.0
vinyl-source-stream ^1.1.0
peer react ^0.14.0 || ^15.0.0-0

Releases

-   v0.6.0 zip tar
-   v0.5.2 zip tar
-   v0.5.1 zip tar
-   v0.5.0 zip tar
-   v0.4.3 zip tar
-   v0.4.2 zip tar
-   v0.4.1 zip tar
-   v0.4.0 zip tar
-   v0.3.2 zip tar
-   v0.3.1 zip tar
-   v0.3.0 zip tar
-   v0.2.4 zip tar
-   v0.2.3 zip tar
-   v0.2.2 zip tar
-   v0.2.1 zip tar
-   v0.2.0 zip tar
-   v0.1.2 zip tar
-   v0.1.1 zip tar
-   v0.1.0 zip tar
-   v0.0.8 zip tar
-   v0.0.7 zip tar
-   v0.0.6 zip tar
-   v0.0.5 zip tar
-   v0.0.4 zip tar
-   v0.0.3 zip tar
-   v0.0.1 zip tar