mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
1.9 KiB
JSON
17 lines
1.9 KiB
JSON
{
|
|
"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"
|
|
} |