ReactJS Semantic UI Ref Addons

Last Updated : 07 Mar, 2024

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 predefined CSS and JQuery to incorporate different frameworks.

In this article, we will learn how to use Ref Addons in ReactJS Semantic UI. Ref Addons is used to make both functional and class components. We can use innerRef property with useRef method

Property:

Forward Ref: It uses forwardRef method which allows the parent component to pass down ref to its children.
inner Ref: The inner Ref property in Ref Addons is used in the in-class component and functional component and returns DOM nodes.
Text Area: This property is used as the default text area.It is used to cover the Form component. The text area is used to enter the input field by the user.
Menu: Menu is a property in the Semantic UI that is used to display the action when users navigate the elements. The main use of menu in content prop.

Syntax:

<Ref>Children content</Ref>

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: this is the basic example that shows how to use Ref addons.

App.js

import React from "react"; import { Grid, Ref, Segment } from "semantic-ui-react";   function RefExampleRef() {   const objectRef = React.useRef(null);     return (     <div id="gfg">       <Grid>         <Grid.Column width={6}>           <Segment.Group>             <Ref>               <h1>Semantic UI Ref Element</h1>             </Ref>           </Segment.Group>           <Segment.Group>             <Ref>               <Segment>A Ref Node </Segment>             </Ref>               <Ref innerRef={objectRef}>               <Segment>                 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                  predefined CSS and JQuery to                  incorporate different frameworks.               </Segment>             </Ref>           </Segment.Group>         </Grid.Column>       </Grid>     </div>   ); }   export default RefExampleRef;