Semantic UI React Intro
Tags: react, semanticui
Published: 2020-12-02 00:22:01

A similar front-end development framework to bootstrap, Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It features pre-built components for creating responsive layouts with user-friendly HTML, JavaScript, and simplified debugging. Besides React it integrates with a number of other frameworks like Angular, Meteor, Ember among others, and organizes UI layers with the app logic.

**Installation**

As shown on the official [site](https://react.semantic-ui.com/usage/) there are two ways to install Semantic UI. 

Option 1: With Package Manager:

`npm install semantic-ui-react semantic-ui-css`

Then import the minified CSS file in your app's entry file:

`import 'semantic-ui-css/semantic.min.css'`

Option 2: CDN (no bundler)

Add the link and script tag to the head of your index.html file:

```
<link
  async
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"
/>
<script
  async
  src="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.js"
></script>
```

##Examples of Features

**Buttons**

There are a wide variety of button types that you can see on the official documentation. Some examples below:

Standard Button:

```
import React from 'react'
import { Button } from 'semantic-ui-react'

const ButtonExampleButton = () => <Button>Click Here</Button>

export default ButtonExampleButton
```

Animated Button:

```
import React from 'react'
import { Button, Icon } from 'semantic-ui-react'

const ButtonExampleAnimated = () => (
  <div>
    <Button animated>
      <Button.Content visible>Next</Button.Content>
      <Button.Content hidden>
        <Icon name='arrow right' />
      </Button.Content>
    </Button>
    <Button animated='vertical'>
      <Button.Content hidden>Shop</Button.Content>
      <Button.Content visible>
        <Icon name='shop' />
      </Button.Content>
    </Button>
    <Button animated='fade'>
      <Button.Content visible>Sign-up for a Pro account</Button.Content>
      <Button.Content hidden>$12.99 a month</Button.Content>
    </Button>
  </div>
)

export default ButtonExampleAnimated
```
**Themes**

Another feature of Semantic UI is custom themes. Semantic UI React does not have its own styling system and fully relies on the theming of Semantic UI.

First you would need to remove existing references for semantic-ui & semantic-ui-css package or styles included from CDN to avoid styles duplication.

`npm uninstall semantic-ui semantic-ui-css`

Then install the required dependencies of for example @craco/craco:

`npm install @craco/craco @semantic-ui-react/craco-less semantic-ui-less --save-dev`

After that, update your package.json:

```
{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }
}
```

And create craco.config.js

```
module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
}
```

There is a tool CLI tool that will copy necessary files with the skeleton of your customization.

`npx @semantic-ui-react/bootstrap`

Edit the `semantic-ui/theme.config` with:

```
/*******************************
            Folders
*******************************/

@themesFolder : 'themes';
@siteFolder  : '../../src/semantic-ui/site';

@import (multiple) "~semantic-ui-less/theme.less";
@fontPath : '../../../themes/@{theme}/assets/fonts';
```

Finally, import the `semantic.less` file in `index.js`

`import 'semantic-ui-less/semantic.less'`

Now it is possible to add color or background for example by editing the `src/semantic-ui/site/globals/site.variables` file:

```
@primaryColor: #002f4e;
@pageBackground: #eff0f1;
```

This is just a brief intro to Semantic UI React and what you can do with it. On the official site, you can look at how to utilize it to make cards, lists, modals among other things.

**References**

- https://react.semantic-ui.com/usage
- https://reactgo.com/semantic-ui-react/
- https://www.robinwieruch.de/react-semantic-ui-tutorial