Semantic UI React is the official React integration for Semantic UI .
Installation instructions are provided in the Usage section.
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 APIs provide for robust features and prop validation.
Control the rendered HTML tag, or render one component
as another component. Extra props are passed to the component you are rendering
Augmentation is powerful. You can compose component features and props without adding extra nested components. This is essential for working with
Shorthand props generate markup for you, making many use cases a breeze. All object props are spread on the child components.
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.
icon prop is standard for many components. It can accept an Icon
name, an Icon props object, or an
<Icon /> instance.
image prop is standard for many components. It can accept an image
src, an Image props object, or an
<Image /> instance.
Sub components give you complete access to the markup. This is essential for flexibility in customizing components.
React has the concept of controlled and uncontrolled components.
Our stateful components self manage their state out of the box, without wiring. Dropdowns open on click without wiring
onClick to the
open prop. The value is also stored internally, without wiring
If you add a
value prop or an
open prop, the Dropdown delegates control for that one prop to your value. The other props remain auto controlled. Mix and match any number of controlled and uncontrolled props. Add and remove control at any time by adding or removing props. Everything just works.
Take a look at our
AutoControlledComponent to see how this was done. See the docs try it out live.