ReactJS Semantic UI Placeholder Element

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 Placeholder element in ReactJS Semantic UI. Placeholder element is used to make a space for content that will come after some time.

Syntax:

<Placeholder/>

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 used the default size placeholder without Fluid and inverted variations. We have displayed the three placeholders one after another and each has a long length.

App.js

import React from 'react'
import { Placeholder } 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); 
  
const App = () => ( 
  <div> 
    <br /> 
    <Placeholder> 
      <Placeholder.Header image> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
      </Placeholder.Header> 
  
      <Placeholder.Paragraph> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
      </Placeholder.Paragraph> 
  
      <Placeholder.Header image> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
        <Placeholder.Line length='long' /> 
      </Placeholder.Header> 
  
    </Placeholder> 
  </div> 
) 
  
export default App

Output:

Example 2: In this example, we have changed the size of the placeholder and used Fluid and inverted variations. We have displayed the three placeholders one after another and each has a very short length.

App.js

import React from 'react'
import { Placeholder } 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); 
  
const App = () => ( 
  <div> 
    <br /> 
    <Placeholder inverted fluid> 
      <Placeholder.Header image> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
      </Placeholder.Header> 
  
      <Placeholder.Paragraph> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
      </Placeholder.Paragraph> 
  
      <Placeholder.Header image> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
        <Placeholder.Line length='very short' /> 
      </Placeholder.Header> 
  
    </Placeholder> 
  </div> 
) 
  
export default App