Semantic UI with React

Semantic UI with React

Semantic-UI-React is the official React integration for Semantic-UI. Now you might be thinking that what is Semantic-UI, so I will give a brief introduction of Semantic-UI. Semantic is a UI framework which is responsively designed to allow your website to scale on multiple devices. Semantic has partnered with frameworks such as React, Angular, Meteor and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic. Now coming on to Semantic-UI-React, well it is an excellent UI integration for react and has got many features. We have used Semantic-UI-React because it has got many elements, collections, views and it is easy to understand and also the documentation is very good.

This tutorial will be best understood if you have the previous knowledge of reactjs.

Firstly, I would like to tell you how to install React-Semantic-UI in your package.json file
JavaScript: Installing Semantic UI React provides the JavaScript for your components
Run the following command:

npm install semantic-ui-react –save

There are two ways to link CSS –

You can use the default Semantic UI stylesheet by including a Semantic UI CDN(Content Delivery Network) link in your index.html file.

< link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css”>< /link>

Semantic UI CSS package: The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI. Run the following command:-

npm install semantic-ui-css –save

Semantic-UI-React uses various descriptive categories to define re-usable UI components. They are as follows:

A UI Element is a basic building block. It can appear alone or in uniform groups. For example, a button can be independent or put in a button group.

A UI Collection is a group of different kinds of elements that are interdependent. For example, a form can have buttons, inputs, checkboxes, icons, and so forth.

A UI View represents a common piece of website content. For example, a Card or comments section.

A UI Module is a component with interactive JavaScript-based functionality. Examples include an accordion, dimmer, modal, and so on.

Now I would like to share some examples of semantic-ui-react which will help you to understand various features of Semantic-UI-React

Example 1: To understand the use of map function to iterate over a list of objects in an array and also conditional rendering
First we created a class Album using JSX and then in render function we are using conditional rendering that if the length of album array is 0 then we return null and if the condition is false then we move to the else block and store the value in the showPhoto variable . The map function is similar to the foreach loop and iterates over every object in an array and slice function is used to iterate over a selected number of objects in a range specified. Our aim is to iterate over the first 4 objects in the album array using map and slice function and display the first object in the photo array which is the first photo in the album .

import React,{ Component } from ‘react’;
var ReactSemantic = require(‘semantic-ui-react’);
var{Segment,Header,Image} = ReactSemantic;
const vendorinfo = {
“vendor_type”: “Photographer”
“vendor”: {
“albums”: [
{

“id”: 1,
“photo”: [
{
“id”: 1,
“url”: “https://www.placehold.it/350X150”

}
]

},

{
“id”: 2,
“photo”: [
{
“id”: 5,
“url”: “https://www.placehold.it/200X200”
}
]
}
]
}
}
var Album = React.createClass({
render:function(){
var showPhoto;
if(vendorinfo.vendor.albums.length == 0){
return null;
}
else{
showPhoto =
<Segment>
<Header as=’h3′>Albums
</Header>
<Image.Group size=’small’>
{vendorinfo.vendor.albums.slice(0,4).map(photos =>
<Image key={photos.photo[0].id} src = {photos.photo[0].url} />)}
</Image.Group>
</Segment>
}
return(
<div>
{showPhoto}
</div>
)
}
});

[/fusion_text][fusion_separator style_type=”single|dotted” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” alignment=”center” /][fusion_separator style_type=”none” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” bottom_margin=”15px” alignment=”center” /][fusion_text]

Example 2:
This example demonstrates the declarative API used in Semantic-UI-React. This just means that components are named after the HTML elements they represent.

JSX
<Button size=’large’ color=’blue’>
<Icon name=’download’ />
Download
</Button>
Rendered HTML
<button class=”ui large blue button”>
<i class=”download icon”>Download</i>
</button>

Example 3: To Render one component as another
This example explains the concept of Augmentation which controls the rendered HTML tag, or render one component as another component. Extra props are passed to the component you are rending ‘as’.

JSX
<Header as=’h3′>
Albums
</Header>
Rendered HTML
<h3 class=”ui header”>
Albums
</h3>

Example 4: For Using Shorthand props
Using this example I am explaining you two concepts, the first one is the shorthand props as I have used icon as a shorthand prop in Label element. The icon prop is standard for many components. The second concept is the concept of className – whenever you want to give additional features to your element, you can give your elements extra classes by giving the className=’mylabel’.

JSX
<Label icon=’star’ className=’mylabel’ />

Rendered HTML <div class=”ui label mylabel”> <i class = ‘star icon’></i> </div>

Example 5: To use the Sub-Components
This example explains the concept of Sub-Components which give you complete access to the markup. This is essential for flexibility in customizing components.

JSX
<Form>
<Form.TextArea placeholder=’Tell Us About Yourself’ />
<Form.Button>Submit</Form.Button>
</Form>

Rendered HTML
<form class = “ui form”>
<div class = “field”>
<textarea placeholder = “Tell Us About Yourself”></textarea>
</div>
<div class = “field”>
<button class = “ui button”>Submit</button
</div>
</form>

Example 6: Stateful components of Semantic-UI-React
The stateful components that Semantic-UI-React provides, self manage their state without wiring. Dropdowns open on click without wiring onClick to the open prop. The value is also stored internally, without wiring onChange to value.

JSX
<Dropdown text=’File’>
<Dropdown.Menu>
<Dropdown.Item text=’New’ />
<Dropdown.Item text=’Open’ />
</Dropdown.Menu>
</Dropdown>

Rendered HTML
<div class = “ui active visible dropdown”>
<div class = “text”>File</div>
<i class = “dropdown icon”></i>
<div class = “menu transition visible”>
<div class = “item”>New</div>
<div class = “item”>Open</div>
</div>
</div>

I hope with that you will be able to get a good idea of Semantic-UI-React and you will enjoy working with it. Let us know for any query.

Quick Links

Our Company

Contact Us