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

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