Refs

Accessing ref is useful in a lot of cases: animation library, accessing DOM... All Smooth UI components implement React.forwardRef to give you access to the underlying DOM component.

Usage

Passing a ref prop to a Smooth UI component will give you the ref of the DOM node.

Focus input
import React from 'react'
import { Input, Button } from '@smooth-ui/core-sc'

function Example() {
  const ref = React.useRef()
  return (
    <>
      <Button onClick={() => ref.current.focus()}>Focus input</Button>
      <Input ref={ref} />
    </>
  )
}

render(<Example />)
import React from 'react'
import { Input, Button } from '@smooth-ui/core-sc'
function Example() {
  const ref = React.useRef()
  return (
    <>
      <Button onClick={() => ref.current.focus()}>Focus input</Button>
      <Input ref={ref} />
    </>
  )
}
render(<Example />)