Setting up Fomantic-UI with React

Fomantic-UI
Feb 9 · 4 min read

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.

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.

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

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

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

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.

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.

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

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

Fomantic-UI

Written by

Fomantic-UI is a community fork of Semantic-UI