ReactJS Semantic UI Placeholder Element
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.
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 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.
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.