Semantic React
WIP
View current documentationMany components are still undocumented, though they are fully functional
This project is a complete Semantic UI (SUI) to React. Currently, the majority of SUI has been ported to React however, much of the components are still untested. Major issues going forward include testing, documentation and various enhancements.
Approach
Semantic-react uses react for any DOM changes. All animations are style-based, so we don't touch the DOM without React knowing.
Other Semantic UI projects out there, like react-semantify, are bindings for semantic-ui's existing javascript. So you'll need react-semantify, semantic-ui and jquery installed to use it. (around 400kb minified in overhead)
semantic-react (in its current state) is around 178kb, and there are no external dependencies besides React and ReactDOM. Once complete, the file size is expected end up around 200kb.
Contributions
The project is currently in its infancy, however, much of the porting is complete. If you would like to contribute to the project, fork and follow the instructions below:
Installation
npm install semantic-react --save
You need to install react, react-dom and react-addons-shallow-compare manually
Development
npm install
npm run styleguide-server
Typings
Library contains bundled Typescript definitions. You need to install react and react-motion typings before:
typings install react react-dom react-motion --global --save
Radium
Radium support included in the box:
import { Button, Icon } from "semantic-react/radium";
Do not mix radium and non-radium components, when using semantic-react with Radium, import components only from 'semantic-react/radium'
Releases
Latest release is 0.5.* . Keep in mind that is still WIP and things may break over time.
Depending on your interest, an excellent place to begin contributing is the High priority issues.