Have ideas to improve npm?Join in the discussion! »

    react-semantify

    0.6.0 • Public • Published

    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

    • git clone git@github.com:jessy1092/react-semantify.git
    • npm i
    • npm test

    License

    MIT

    Install

    npm i react-semantify

    DownloadsWeekly Downloads

    13

    Version

    0.6.0

    License

    MIT

    Last publish

    Collaborators

    • avatar