react-semantify
v0.6.0
Published
Integrate Semantic-ui with react components.
Downloads
59
Maintainers
Readme
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
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
<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
- Advertisement - Pre-release
- Card - Pre-release
- Comments/Comment - Pre-release
- Feed - Pre-release
- Items/Item - Pre-release
- Statistic - Pre-release
Comming Soon
Wait Semantic-UI Release.
- Modules
- Nag
- Video
Release Notes
Contribute
- Fork it.
- Create your feature-branch
git checkout -b your-new-feature-branch
- Commit your change
git commit -am 'Add new feature'
- Push to the branch
git push origin your-new-feature-branch
- 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