Skip to content
Related Articles

Related Articles

Improve Article

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 = 
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 = 
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

Output:

Reference: https://react.semantic-ui.com/elements/placeholder




My Personal Notes arrow_drop_up
Recommended Articles
Page :