Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://jessy1092.github.io/react-semantify/

Integrate Semantic-ui with react components.
https://jessy1092.github.io/react-semantify/
Last synced: about 1 month ago
JSON representation
Integrate Semantic-ui with react components.
Host: GitHub
URL: https://jessy1092.github.io/react-semantify/
Owner: jessy1092
License: mit
Created: 2014-12-11T14:40:05.000Z (about 10 years ago)
Default Branch: master
Last Pushed: 2017-10-03T13:13:03.000Z (about 7 years ago)
Last Synced: 2024-09-25T06:52:16.158Z (3 months ago)
Language: JavaScript
Homepage: http://jessy1092.github.io/react-semantify
Size: 2.04 MB
Stars: 343
Watchers: 20
Forks: 41
Open Issues: 14
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

awesome-semantic-ui - React Semantify - ui with react components. (Frontend)
README

        React-Semantify

=============

[![npm][npm-image]][npm-url] [![Dependency Status][david-dm-image]][david-dm-url] [![Build Status][travis-ci-image]][travis-ci-url] [![Coverage Status][coverage-status-image]][coverage-status-url]

Integrate Semantic-ui with react components. It depends on Semantic-UI and helps you use with react component.

> Now the [official Semantic-UI-React](https://github.com/TechnologyAdvice/stardust) library is developing.

> I would maintain `react-semantify` until official library release v1.

> Welcome to provide your usage or suggestion to  [Semantic-UI-React](https://github.com/TechnologyAdvice/stardust)

[The components' Docs on the website](http://jessy1092.github.io/react-semantify) - Pre-release

[The components' Docs on the github](https://github.com/jessy1092/react-semantify/blob/master/docs)

|         | React = 0.12 | React = 0.13.* | React >= 0.14.* && React <= 15.* |

| ------- | ------------ | -------------- | -------------------------------- |

| Version | <= 0.2       |  0.3.*         | >= 0.4.*                            |

## Usage

### In Browser

[Download js file][react-semantify-url]

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.

```html

```

```js



  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')

  );

```

### With Browserify or Webpack

```sh

npm install react-semantify

```

Ex.

```js

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 (

      

        Hello World!

      

    );

  }

});

ReactDOM.render(

  ,

  document.getElementById('content')

);

```

And then you should include `jQuery` and `semantic-ui` in your browser.

Use [cdnjs][cdnjs-url] or [bower][bower-url]

Use cdnjs

```html

<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

```sh

bower install semantic-ui

```

## Component

- [Elements](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md)

  + [Button](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#button)

  + [Divider](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#divider)

  + [Container](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#container)

  + [Flag](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#flag)

  + [Header](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#header)

  + [Icon](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#icon)

  + [Image](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#image)

  + [Input](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#input)

  + [Label](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#label)

  + [List](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#list)

  + [Loader](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#loader)

  + [Rail](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#rail) - Pre-release

  + [Reveal](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#reveal) - Pre-release

  + [Segment](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#segment)

  + [Steps/Step](https://github.com/jessy1092/react-semantify/blob/master/docs/Elements.md#stepsstep) - Pre-release

- [Collections](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md)

  + [Breadcrumb](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#breadcrumb) - Pre-release

  + [Form](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#stepsstep) - Pre-release

  + [Grid](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#grid) - Pre-release

  + [Menu](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#menu) - Pre-release

  + [Message](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#message) - Pre-release

  + [Table](https://github.com/jessy1092/react-semantify/blob/master/docs/Collections.md#table) - Pre-release

- [Views](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md)

  + [Advertisement](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#advertisement) - Pre-release

  + [Card](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#card) - Pre-release

  + [Comments/Comment](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#commentscomment) - Pre-release

  + [Feed](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#feed) - Pre-release

  + [Items/Item](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#itemsitem) - Pre-release

  + [Statistic](https://github.com/jessy1092/react-semantify/blob/master/docs/Views.md#statistic) - Pre-release

- [Modules](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md)

  + [Accordion](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#accordion)

  + [Checkbox](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#checkbox)

  + [Dimmer](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#dimmer)

  + [Dropdown](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#dropdown)

  + [Embed](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#embed)

  + [Modal](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#modal)

  + [Popup](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#popup) - Pre-release

  + [Progress](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#progress)

  + [Rating](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#rating)

  + [Search](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#search)

  + [Shape](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#shape)

  + [Sidebar](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#sidebar)

  + [Sticky](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#sticky)

  + [Tab](https://github.com/jessy1092/react-semantify/blob/master/docs/Modules.md#tab)

### Comming Soon

Wait Semantic-UI Release.

- Modules

  + Nag

  + Video

## Release Notes

[Release Notes](https://github.com/jessy1092/react-semantify/blob/master/RELEASE-NOTES.md)

## Contribute

[![devDependency Status][david-dm-dev-image]][david-dm-dev-url]

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](https://github.com/ajoslin/conventional-changelog/blob/master/conventions/angular.md).

## Run Test

- `git clone [email protected]:jessy1092/react-semantify.git`

- `npm i`

- `npm test`

## License

[MIT](./LICENSE)

[bower-url]: http://bower.io/

[cdnjs-url]: https://cdnjs.com/libraries/semantic-ui

[react-semantify-url]: https://github.com/jessy1092/react-semantify/releases

[npm-image]: https://img.shields.io/npm/v/react-semantify.svg?style=flat-square

[npm-url]: https://www.npmjs.com/package/react-semantify

[david-dm-image]: https://img.shields.io/david/jessy1092/react-semantify.svg?style=flat-square

[david-dm-url]: https://david-dm.org/jessy1092/react-semantify

[david-dm-dev-image]: https://img.shields.io/david/dev/jessy1092/react-semantify.svg?style=flat-square

[david-dm-dev-url]: https://david-dm.org/jessy1092/react-semantify#info=devDependencies

[travis-ci-image]: https://img.shields.io/travis/jessy1092/react-semantify.svg?style=flat-square

[travis-ci-url]: https://travis-ci.org/jessy1092/react-semantify

[coverage-status-image]: https://img.shields.io/coveralls/jessy1092/react-semantify.svg?style=flat-square

[coverage-status-url]: https://coveralls.io/r/jessy1092/react-semantify