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
- 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.
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.
- 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.
Step to Run Application: Run the application from the root directory of the project, using the following command.