ReactJS Semantic UI Dimmer Module
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.
- Content Dimmer: dimmer can display content.
- Page Dimmer: A dimmer can be formatted to fixed on the page.
- Active: It is used to dim its parent container.
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.
- 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.
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.
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.