{
  "id": "b423e74b65631f109171f832",
  "source": "solid:signals",
  "type": "github-document",
  "title": "ref",
  "content": "---\ntitle: ref\norder: 7\nuse_cases: \u003e-\n  dom access, element manipulation, focus management, measurements, third-party\n  libraries, animations\ntags:\n  - refs\n  - dom\n  - elements\n  - access\n  - manipulation\n  - components\nversion: '1.0'\ndescription: \u003e-\n  Access DOM elements directly in SolidJS with refs. Get references to rendered\n  elements for imperative operations and third-party integrations.\n---\n\nRefs are a way of getting access to underlying DOM elements in our JSX. While it is true one could just assign an element to a variable, it is more optimal to leave components in the flow of JSX. Refs are assigned at render time but before the elements are connected to the DOM. They come in 2 flavors.\n\n```tsx\n// variable assigned directly by ref\nlet myDiv;\n\n// use onMount or createEffect to read after connected to the DOM\nonMount(() =\u003e console.log(myDiv));\n\n\u003cdiv ref={myDiv} /\u003e\n\n// Or, callback function (called before connected to the DOM)\n\u003cdiv ref={el =\u003e console.log(el)} /\u003e\n```\n\nRefs can also be used on Components. They still need to be attached on the other side.\n\n```tsx\nfunction MyComp(props) {\n\treturn \u003cdiv ref={props.ref} /\u003e\n}\n\nfunction App() {\n\tlet myDiv\n\tonMount(() =\u003e console.log(myDiv.clientWidth))\n\treturn \u003cMyComp ref={myDiv} /\u003e\n}\n```",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/ref.mdx",
  "metadata": {
    "path": "src/routes/reference/jsx-attributes/ref.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1257,
    "source_type": "github"
  },
  "hash": "834cd4f19e1e0bd83077ce6e19ce64f853e8976c0877caa4aec09c38bc5e53dd",
  "timestamp": "2026-02-23T11:43:00.189554746+01:00"
}