ReactJS Semantic UI Dimmer Module

Last Updated : 21 Jun, 2021

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

In this article, we will know how to use Dimmer Module in ReactJS Semantic UI. Dimmer Module is used to focus the attention of the user on a particular section or a segment of the page.

Properties:

Content Dimmer: dimmer can display content.
Page Dimmer: A dimmer can be formatted to fixed on the page.

States:

Active: It is used to dim its parent container.

Syntax:

<Dimmer/>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
```
cd foldername
```
Step 3: Install semantic UI in your given directory.
```
 npm install semantic-ui-react semantic-ui-css
```

Project Structure: It will look like the following.

Step to Run Application: Run the application from the root directory of the project, using the following command.

npm start

Example 1: In this example, we have shown a dim effect to focus the attention of the user. This dim effect is shown when the user clicks on the Dim button. The original button to also present to get back to a normal state.

App.js

import React, { Component } from 'react'
import { Button, Dimmer, Header, Icon } from 'semantic-ui-react'
  
const styleLink = document.createElement("link"); 
styleLink.rel = "stylesheet"; 
styleLink.href =  
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"; 
document.head.appendChild(styleLink); 
  
export default class App extends Component { 
  state = {} 
  
  GetDIM = () => this.setState({ dim: true }) 
  HideDIM = () => this.setState({ dim: false }) 
  
  render() { 
    const { dim } = this.state 
  
    return ( 
      <div> 
        <Dimmer.Dimmable dimmed={dim}> 
          <Header as='h3'>GeeksforGeeks </Header> 
          Semantic UI 
          <Dimmer active={dim} /> 
          <br /> 
          <Icon name='react' size='huge' /> 
        </Dimmer.Dimmable> 
  
        <Button onClick={this.GetDIM} content='Dim' /> 
        <Button onClick={this.HideDIM} content='Original' /> 
      </div> 
    ) 
  } 
} 

Output:

Example 2: In this example, we have shown a loading effect to focus the attention of the user. This loading effect is shown when the user clicks on the load button. The original button to also present to get back to a normal state.

App.js

import React, { Component } from 'react'
import { Button, Dimmer, Header, Icon, Loader } from 'semantic-ui-react'
  
const styleLink = document.createElement("link"); 
styleLink.rel = "stylesheet"; 
styleLink.href =  
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"; 
document.head.appendChild(styleLink); 
  
export default class App extends Component { 
  state = {} 
  
  GetDIM = () => this.setState({ dim: true }) 
  HideDIM = () => this.setState({ dim: false }) 
  
  render() { 
    const { dim } = this.state 
  
    return ( 
      <div> 
        <Dimmer.Dimmable dimmed={dim}> 
          <Header as='h3'>GeeksforGeeks </Header> 
          Semantic UI 
          <Dimmer active={dim} inverted > 
            <Loader>Loading</Loader> 
          </Dimmer> 
          <br /> 
          <Icon name='react' size='huge' /> 
        </Dimmer.Dimmable> 
  
        <Button onClick={this.GetDIM} content='load' /> 
        <Button onClick={this.HideDIM} content='Original' /> 
      </div> 
    ) 
  } 
} 