Semantic UI React The official Semantic-UI-React integration.

Introduction Semantic UI React is the official React integration for Semantic UI . jQuery Free Declarative API Augmentation Shorthand Props Sub Components Auto Controlled State Installation instructions are provided in the Usage section.

jQuery Free jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). React only writes patch updates to the DOM, but never reads from it. It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all jQuery functionality has been re-implemented in React.

Declarative API Declarative APIs provide for robust features and prop validation. JSX Rendered HTML JSX Rendered HTML

Augmentation Control the rendered HTML tag, or render one component as another component. Extra props are passed to the component you are rendering as . Augmentation is powerful. You can compose component features and props without adding extra nested components. This is essential for working with MenuLinks and react-router . JSX Rendered HTML JSX Rendered HTML

Shorthand Props Shorthand props generate markup for you, making many use cases a breeze. All object props are spread on the child components. Child Object Arrays Components with repeating children accept arrays of plain objects. Facebook is fond of this over using context to handle parent-child coupling and so are we. JSX Rendered HTML icon={...} The icon prop is standard for many components. It can accept an Icon name , an Icon props object, or an <Icon /> instance. JSX Rendered HTML image={...} The image prop is standard for many components. It can accept an image src , an Image props object, or an <Image /> instance. JSX Rendered HTML

Sub Components Sub components give you complete access to the markup. This is essential for flexibility in customizing components. JSX Rendered HTML