Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

Every component generated by %styled.* exposes an innerRef prop that is forwarded to the underlying DOM element. Use it wherever you would normally use ref — for focus management, scroll position, measuring dimensions, or integrating with third-party libraries that need a direct DOM node.
The prop is named innerRef, not ref. React’s built-in ref prop is reserved and cannot be passed through components; styled-ppx uses innerRef as its forwarding mechanism.

​
Complete example

The example below creates a styled Input component and uses innerRef with React.useRef to programmatically focus the input when a button is clicked: 
module Input = %styled.input(`
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 16px;
  outline: none;

  &:focus {
    border-color: #aaaaaa;
  }
`)

@react.component
let make = () => {
  let input = React.useRef(Js.Nullable.null)

  let focusInput = () =>
    input.current
    ->Js.Nullable.toOption
    ->Belt.Option.forEach(input => focus(input))

  let onClick = _ => focusInput()

  <div>
    <Input innerRef={ReactDOM.Ref.domRef(input)} />
    <button onClick> {React.string("Click to focus")} </button>
  </div>
}
The key steps are:
  1. Create a ref with React.useRef(Js.Nullable.null).
  2. Pass it to the styled component as innerRef={ReactDOM.Ref.domRef(input)}.
  3. Access the DOM node via input.current to call imperative DOM APIs.

​
Further reading

Forwarding Refs — ReScript React docs

Full documentation on how React refs work in ReScript, including forwardRef components and callback refs.

Build docs developers (and LLMs) love

Get started for freeTalk to us