Setting up Fomantic-UI with React

Introduction

Before I start some people probably found this because they are struggling to setup Semantic-UI with react and they are probably wondering “what is this Fomantic-UI?”. Fomantic-UI (FUI) is the community fork of Semantic-UI z(SUI) because development has come to a standstill and there were multiple issues started questioning the development. If you want to find out more about why FUI was started I highly suggest reading the following issues 6109 & 6413.

To get FUI setup with React we will be using the Semantic-UI-React (SUIR) package since we can’t use jQuery with React. The SUIR is just the JavaScript for SUI so we can use the CSS from FUI which includes all the CSS bug fixes etc. I will also go over how to use some new features added in FUI with SUIR at the end.

Pre-setup

Before we start installing FUI and SUIR you need a React project, I will be using create-react-app because its the easiest way to get started.

$ npx create-react-app fuir-demo
$ cd fuir-demo

Basic Installation

The easiest way to install FUI is to use the CSS only distribution, this will only include the default theme and will not allow you to create your own theme. If you want to use a theme use the theme installation method.

The simplest way to get started is to use fomantic-ui-css from npm which will include the CSS files we need for SUIR to work.

$ npm install --save fomantic-ui-css semantic-ui-react

Once installed you need to add the CSS file to your app. Make sure you only import the file once. The best place to import the file is in your entry file. By default the entry file is src/App.js

...
import 'fomantic-ui-css/semantic.css';
import { Container, Header } from 'semantic-ui-react';
...
class App extends Component {
render() {
return (
<Container>
<Header>
Fomantic-UI & Semantic-UI-React
</Header>
</Container>
);
}
}
export default App;

Theme Installation

So the basic installation only allows you to use the default FUI theme but you want to make your own!

The installation process is very similar but instead of using fomantic-ui-css we will install the main package fomantic-ui

$ npm install --save fomantic-ui semantic-ui-react

Once finished installing NPM will run the fomantic interactive installer, when the installer prompts you with

? Where should we put Semantic UI inside your project?

Make sure you enter a directory which is inside your src directory. I will use src/assets/fomantic for this example.

Once the installer is finished you will need to build your distribution files. To do this you need to run the gulp build task.

$ cd src/assets/fomantic
$ npx gulp build

Once the build process has finished you will have a new directory inside your install location called dist which will contain all the distribution files.

You can now go ahead and include the CSS file in your React entry file just like the basic installation.

...
import './assets/fomantic/dist/semantic.css';
import { Container, Header } from 'semantic-ui-react';
...
class App extends Component {
render() {
return (
<Container>
<Header>
Fomantic-UI & Semantic-UI-React
</Header>
</Container>
);
}
}
export default App;

Your done 🎉

If you successfully followed either of the above steps you should have a fully functional SUIR app using FUI CSS and any issues you had caused by CSS bugs in SUI should now be fixed 🙌

Using new Fomantic-UI features

Since SUIR is designed for SUI it doesn’t include all the new features which the standalone FUI includes. Some of these features you can still use by simply adding the classes yourself however you can’t use new features which require changes to the JavaScript or any new components which aren’t includes in SUIR.

An example of a feature you can use is the new loader colors and speeds, both these features require the user to add classes to the loader which you can do in SUIR since they apply any classes added the the components to the elements they produce. Here is an example

<Loader active inline className="slow red" />
<Loader active inline className="fast green" />

So that’s it

The quick and easy way to get started with FUI with React. Hopefully this guide helped you understand how to setup your project and you can now start using this amazing project 🤘

Helpful resources