Semantic UI React

The official Semantic-UI-React integration.

Introduction

Semantic UI React is the official React integration for Semantic UI .

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.

<Rating rating={1} maxRating={5} />

<div
  class="ui rating"
  data-rating="1"
  data-max-rating="5"
></div>

<Button size='small' color='green'>
  <Icon name='download' />
  Download
</Button>

<button class="ui small green button">
  <i class="download icon"></i>
  Download
</button>

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.

<Header as='h3'>
  Learn More
</Header>

<h3 class="ui header">
  Learn More
</h3>

import { Link } from 'react-router-dom'

<Menu>
  <Menu.Item as={Link} to='/home'>
    Home
  </Menu.Item>
</Menu>

<div class="ui menu">
  <a class="item" href="/home">
    Home
  </a>
</div>

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.

<Accordion panels={[
  { title: 'What is a dog?', content: '...' },
  { title: 'What kinds are there?', content: '...' },
]} />

<div class="ui accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    What is a dog?
  </div>
  <div class="content">
    <p>...</p>
  </div>
  <div class="title">
    <i class="dropdown icon"></i>
    What kinds are there?
  </div>
  <div class="content">
    <p>...</p>
  </div>
</div>

icon={...}

The icon prop is standard for many components. It can accept an Icon name, an Icon props object, or an <Icon /> instance.

<Message
  success
  icon='thumbs up'
  header='Nice job!'
  content='Your profile is complete.'
/>

<div class="ui success message">
  <i class="thumbs up icon"></i>
  <div class="content">
    <div class="header">
      Nice job!
    </div>
    Your profile is complete.
  </div>
</div>

image={...}

The image prop is standard for many components. It can accept an image src, an Image props object, or an <Image /> instance.

<Label image='veronika.jpg' />

<div class="ui image label">
  <img src="veronika.jpg">
</div>

Sub Components

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

<Message icon>
  <Icon name='circle notched' loading />
  <Message.Content>
    <Message.Header>
      Just one second
    </Message.Header>
    We're fetching that content for you.
  </Message.Content>
</Message>

<div class="ui icon message">
  <i class="loading circle notched icon"></i>
  <div class="content">
    <div class="header">
      Just one second
    </div>
    We're fetching that content for you.
  </div>
</div>

Auto Controlled State

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 onChange to value.

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.