Skip to content
Related Articles

Related Articles

Improve Article

ReactJS Semantic UI Reveal Element

  • Last Updated : 13 Jun, 2021
Geek Week

Semantic UI is a modern framework used in developing seamless designs for the website, Its gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.

Reveal element in ReactJS Semantic UI is used to reveal the content by hovering over the previous content.

Properties:

  • Move: element move in the direction to reveal content.
  • Rotate: element rotate in the direction to reveal content.

States:

  • Active: It displays its hidden content.
  • Disabled: It will not animate when you do mouse hover.

 



Syntax:

<reveal>
  <reveal.content/>
</reveal>

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.

 



Example 1: In this example, we will use a reveal component with animated props and small fade content type so that content may be visible before interaction by using the Semantic UI Reveal element.

App.js




import React from 'react'
import { Image, Reveal, List } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
document.head.appendChild(styleLink);
  
const Btt = () => (
<div>
    <br />
    <Reveal animated='small fade'>
    <Reveal.Content visible>
      <Image src=
             size='small' />
    </Reveal.Content>
    <Reveal.Content hidden>
      <Image src=
             size='small' />
    </Reveal.Content>
  </Reveal>
</div>
)
  
  
export default Btt

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Output:

Example 2: In this example, we will use a reveal component with animated props and move right type so that element can move in a right direction to reveal content by using the Semantic UI Reveal element.

App.js




import React from 'react'
import { Image, Reveal, List } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
document.head.appendChild(styleLink);
  
const Btt = () => (
<div>
    <br />
    <Reveal animated='move right'>
    <Reveal.Content visible>
      <Image src=
             size='small' />
    </Reveal.Content>
    <Reveal.Content hidden>
      <Image src=
       size='small' />
    </Reveal.Content>
  </Reveal>
</div>
)
  
  
export default Btt

Step to Run Application: Run the application  from the root directory of the project, using the following command.

npm start

Output: 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :