ReactJS Semantic UI Advertisement Views

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 advertisement views in ReactJS Semantic UI.

Advertisement is used to display third-party promotional content.

Types:

• Common Units: Advertisement can appear in common ad unit sizes according to the user’s requirement.
• Mobile: Advertisements can appear in different mobile ad unit sizes.
• Rectangle: Advertisements can appear in rectangle ad unit sizes.
• Button: Advertisement can appear in button ad unit sizes.
• Skyscraper: Advertisements can appear in skyscrapers ad unit sizes.
• Banner: Advertisements can appear in banner ad unit sizes.
• Leaderboards: Advertisements can appear in leaderboard ad unit sizes.
• Panorama: Advertisements can appear in common ad unit sizes.
• Netboard: Advertisement can appear in different netboard ad unit sizes.
• Square: Advertisement can appear in common square ad unit sizes.

Syntax:

<advertisement>
  <img src='link'/>
</advertisement>

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 Advertisement element to display standard ads by using ReactJS Semantic UI Advertisement views

App.js

import React from 'react'
import { Advertisement } 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 btt = () => (
<div>
  <br/>
    <Advertisement unit='medium rectangle'>
    <img src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg' />
    </Advertisement>
</div>
)

export default btt

Output: 

Example 2: In this example, we have used the Advertisement element with unit type banner by using ReactJS Semantic UI Advertisement views.

App.js

import React from 'react'
import { Advertisement } 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 btt = () => (
<div>
  <br/>
    <Advertisement unit='banner' test='GeeksforGeeks' />
</div>
)

export default btt

Output:

Reference: https://react.semantic-ui.com/views/advertisement