Ref

Props

Currently, it's recommended to use Ref component to get refs to HTML elements from Semantic UI React components as not all components support native ref forwarding via React.forwardRef().

As it uses deprecated ReactDOM.findDOMNode() you may receive warnings in React's StrictMode. We are working on it in Semantic-Org/Semantic-UI-React#3819.

A component exposes the innerRef prop that always returns the DOM node of both functional and class component children.

An example node with functional ref

An example node with ref via React.useRef()

Type	`nodeName`	`textContent`
Functional ref via `React.useState()` hook	DIV	An example node with functional ref
From `React.useRef()` hook	DIV	An example node with ref via React.useRef()

React.forwardRef() API is also handled by this component.

A button below uses React.forwardRef() API.

{
  "nodeName": "BUTTON",
  "nodeType": 1,
  "textContent": "A button"
}

This is the bottom

Blazing deployments by

Vercel.

Ref
This component exposes the `innerRef` prop that supports functional and React.createRef()/React.useRef() API and returns the DOM node of both functional and class component children.

Types

Forward Ref

RefThis component exposes the `innerRef` prop that supports functional and React.createRef()/React.useRef() API and returns the DOM node of both functional and class component children.

Types

Ref

Forward Ref

Ref
This component exposes the `innerRef` prop that supports functional and React.createRef()/React.useRef() API and returns the DOM node of both functional and class component children.