ReactJS Semantic UI Ref Addons

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;

index.css

#gfg {
    margin: 40px;
}

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

npm start

Output: