{"action":"created","comment":{"url":"https://api.github.com/repos/Roblox/roact/pulls/comments/188449992","pull_request_review_id":120431355,"id":188449992,"diff_hunk":"@@ -8,7 +8,59 @@\n To create a ref, pass a function prop with the key `Roact.Ref` when creating a primitive element.\n \n For example, suppose we wanted to create a search bar that captured cursor focus when any part of it was clicked. We might use a component like this:\n+```lua\n+--[[\n+\tA search bar with an icon and a text box that captures focus for its TextBox\n+\twhen its icon is clicked\n+ ]]\n+local SearchBar = Roact.Component:extend(\"SearchBar\")\n+\n+function SearchBar:init()\n+\t-- Roact.createRef creates an object reference.\n+\t-- This has a single property, `current`, that can be used to access the\n+\t-- current Roblox instance.\n+\tself.textBoxRef = Roact.createRef()\n+end\n+\n+function SearchBar:captureFocus()\n+\tlocal textBox = self.textBoxRef.current\n \n+\t-- If we have a current instance, capture focus on it.\n+\t-- current will be nil if the component hasn't been mounted yet, or it's\n+\t-- being unmounted.\n+\tif textBox then\n+\t\ttextBox:CaptureFocus()\n+\tend\n+end\n+\n+function SearchBar:render()\n+\t-- Render our icon and text box side by side in a Frame\n+\treturn Roact.createElement(\"Frame\", {\n+\t\tSize = UDim2.new(0, 200, 0, 20),\n+\t}, {\n+\t\tSearchIcon = Roact.createElement(\"ImageButton\", {\n+\t\t\tSize = UDim2.new(0, 20, 0, 20),\n+\t\t\t-- Handle click events on the icon\n+\t\t\t[Roact.Event.MouseButton1Click] = function()\n+\t\t\t\tself:captureFocus()\n+\t\t\tend,\n+\t\t}),\n+\n+\t\tSearchTextBox = Roact.createElement(\"TextBox\", {\n+\t\t\tSize = UDim2.new(0, 180, 0, 20),\n+\t\t\tPosition = UDim2.new(0, 20, 0, 0),\n+\t\t\t-- We use Roact.Ref to get a reference to the underlying object\n+\t\t\t-- Roact will set textBoxRef.current to the underlying object as\n+\t\t\t-- part of the rendering process.\n+\t\t\t[Roact.Ref] = self.textBoxRef,\n+\t\t}),\n+\t})\n+end\n+```\n+When a user clicks on the outer `ImageButton`, the `captureFocus` method will be called and the `TextBox` instance will get focus as if it had been clicked on directly.\n+\n+## Functional Refs\n+Roact allows you to use functions as refs. The function will be called with the Roblox object that Roact creates. For example, this is the SearchBar component from above, modified to use functional refs instead of object refs:","path":"docs/advanced/refs.md","position":null,"original_position":56,"commit_id":"1f86eb10ad936d7b47f94483fa5ed87d24cd8f39","original_commit_id":"b6248012f04e72382cd8be1fcafce99b9d3b114e","user":{"login":"AmaranthineCodices","id":31936135,"avatar_url":"https://avatars2.githubusercontent.com/u/31936135?v=4","gravatar_id":"","url":"https://api.github.com/users/AmaranthineCodices","html_url":"https://github.com/AmaranthineCodices","followers_url":"https://api.github.com/users/AmaranthineCodices/followers","following_url":"https://api.github.com/users/AmaranthineCodices/following{/other_user}","gists_url":"https://api.github.com/users/AmaranthineCodices/gists{/gist_id}","starred_url":"https://api.github.com/users/AmaranthineCodices/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AmaranthineCodices/subscriptions","organizations_url":"https://api.github.com/users/AmaranthineCodices/orgs","repos_url":"https://api.github.com/users/AmaranthineCodices/repos","events_url":"https://api.github.com/users/AmaranthineCodices/events{/privacy}","received_events_url":"https://api.github.com/users/AmaranthineCodices/received_events","type":"User","site_admin":false},"body":"Fair enough, done!","created_at":"2018-05-15T22:01:19Z","updated_at":"2018-05-15T22:01:19Z","html_url":"https://github.com/Roblox/roact/pull/92#discussion_r188449992","pull_request_url":"https://api.github.com/repos/Roblox/roact/pulls/92","author_association":"CONTRIBUTOR","_links":{"self":{"href":"https://api.github.com/repos/Roblox/roact/pulls/comments/188449992"},"html":{"href":"https://github.com/Roblox/roact/pull/92#discussion_r188449992"},"pull_request":{"href":"https://api.github.com/repos/Roblox/roact/pulls/92"}},"in_reply_to_id":188373369},"pull_request":{"url":"https://api.github.com/repos/Roblox/roact/pulls/92","id":188108970,"html_url":"https://github.com/Roblox/roact/pull/92","diff_url":"https://github.com/Roblox/roact/pull/92.diff","patch_url":"https://github.com/Roblox/roact/pull/92.patch","issue_url":"https://api.github.com/repos/Roblox/roact/issues/92","number":92,"state":"open","locked":false,"title":"createRef API","user":{"login":"AmaranthineCodices","id":31936135,"avatar_url":"https://avatars2.githubusercontent.com/u/31936135?v=4","gravatar_id":"","url":"https://api.github.com/users/AmaranthineCodices","html_url":"https://github.com/AmaranthineCodices","followers_url":"https://api.github.com/users/AmaranthineCodices/followers","following_url":"https://api.github.com/users/AmaranthineCodices/following{/other_user}","gists_url":"https://api.github.com/users/AmaranthineCodices/gists{/gist_id}","starred_url":"https://api.github.com/users/AmaranthineCodices/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AmaranthineCodices/subscriptions","organizations_url":"https://api.github.com/users/AmaranthineCodices/orgs","repos_url":"https://api.github.com/users/AmaranthineCodices/repos","events_url":"https://api.github.com/users/AmaranthineCodices/events{/privacy}","received_events_url":"https://api.github.com/users/AmaranthineCodices/received_events","type":"User","site_admin":false},"body":"Closes #70.\r\n\r\nAdds a `createRef` function to the global Roact namespace. `createRef` returns an object reference with a `current` property that can be used like existing functional refs. Example usage:\r\n\r\n```lua\r\nlocal SomeTextbox = Roact.Component:extend(\"SomeTextbox\")\r\n\r\nfunction SomeTextbox:init()\r\n    self.textboxRef = Roact.createRef()\r\nend\r\n\r\nfunction SomeTextbox:render()\r\n    return Roact.createElement(\"TextBox\", {\r\n        -- ...\r\n        [Roact.Ref] = self.textboxRef\r\n    })\r\nend\r\n\r\nfunction SomeTextbox:didMount()\r\n    self.textboxRef.current:CaptureFocus()\r\nend\r\n```","created_at":"2018-05-15T12:19:32Z","updated_at":"2018-05-15T22:01:19Z","closed_at":null,"merged_at":null,"merge_commit_sha":"b41f5cd8f2df8d6f55820a8181e5cbfb678c7e98","assignee":null,"assignees":[],"requested_reviewers":[],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Roblox/roact/pulls/92/commits","review_comments_url":"https://api.github.com/repos/Roblox/roact/pulls/92/comments","review_comment_url":"https://api.github.com/repos/Roblox/roact/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Roblox/roact/issues/92/comments","statuses_url":"https://api.github.com/repos/Roblox/roact/statuses/1f86eb10ad936d7b47f94483fa5ed87d24cd8f39","head":{"label":"AmaranthineCodices:createRef","ref":"createRef","sha":"1f86eb10ad936d7b47f94483fa5ed87d24cd8f39","user":{"login":"AmaranthineCodices","id":31936135,"avatar_url":"https://avatars2.githubusercontent.com/u/31936135?v=4","gravatar_id":"","url":"https://api.github.com/users/AmaranthineCodices","html_url":"https://github.com/AmaranthineCodices","followers_url":"https://api.github.com/users/AmaranthineCodices/followers","following_url":"https://api.github.com/users/AmaranthineCodices/following{/other_user}","gists_url":"https://api.github.com/users/AmaranthineCodices/gists{/gist_id}","starred_url":"https://api.github.com/users/AmaranthineCodices/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AmaranthineCodices/subscriptions","organizations_url":"https://api.github.com/users/AmaranthineCodices/orgs","repos_url":"https://api.github.com/users/AmaranthineCodices/repos","events_url":"https://api.github.com/users/AmaranthineCodices/events{/privacy}","received_events_url":"https://api.github.com/users/AmaranthineCodices/received_events","type":"User","site_admin":false},"repo":{"id":117580831,"name":"roact","full_name":"AmaranthineCodices/roact","owner":{"login":"AmaranthineCodices","id":31936135,"avatar_url":"https://avatars2.githubusercontent.com/u/31936135?v=4","gravatar_id":"","url":"https://api.github.com/users/AmaranthineCodices","html_url":"https://github.com/AmaranthineCodices","followers_url":"https://api.github.com/users/AmaranthineCodices/followers","following_url":"https://api.github.com/users/AmaranthineCodices/following{/other_user}","gists_url":"https://api.github.com/users/AmaranthineCodices/gists{/gist_id}","starred_url":"https://api.github.com/users/AmaranthineCodices/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AmaranthineCodices/subscriptions","organizations_url":"https://api.github.com/users/AmaranthineCodices/orgs","repos_url":"https://api.github.com/users/AmaranthineCodices/repos","events_url":"https://api.github.com/users/AmaranthineCodices/events{/privacy}","received_events_url":"https://api.github.com/users/AmaranthineCodices/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/AmaranthineCodices/roact","description":"A view management library for Roblox Lua like React","fork":true,"url":"https://api.github.com/repos/AmaranthineCodices/roact","forks_url":"https://api.github.com/repos/AmaranthineCodices/roact/forks","keys_url":"https://api.github.com/repos/AmaranthineCodices/roact/keys{/key_id}","collaborators_url":"https://api.github.com/repos/AmaranthineCodices/roact/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/AmaranthineCodices/roact/teams","hooks_url":"https://api.github.com/repos/AmaranthineCodices/roact/hooks","issue_events_url":"https://api.github.com/repos/AmaranthineCodices/roact/issues/events{/number}","events_url":"https://api.github.com/repos/AmaranthineCodices/roact/events","assignees_url":"https://api.github.com/repos/AmaranthineCodices/roact/assignees{/user}","branches_url":"https://api.github.com/repos/AmaranthineCodices/roact/branches{/branch}","tags_url":"https://api.github.com/repos/AmaranthineCodices/roact/tags","blobs_url":"https://api.github.com/repos/AmaranthineCodices/roact/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/AmaranthineCodices/roact/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/AmaranthineCodices/roact/git/refs{/sha}","trees_url":"https://api.github.com/repos/AmaranthineCodices/roact/git/trees{/sha}","statuses_url":"https://api.github.com/repos/AmaranthineCodices/roact/statuses/{sha}","languages_url":"https://api.github.com/repos/AmaranthineCodices/roact/languages","stargazers_url":"https://api.github.com/repos/AmaranthineCodices/roact/stargazers","contributors_url":"https://api.github.com/repos/AmaranthineCodices/roact/contributors","subscribers_url":"https://api.github.com/repos/AmaranthineCodices/roact/subscribers","subscription_url":"https://api.github.com/repos/AmaranthineCodices/roact/subscription","commits_url":"https://api.github.com/repos/AmaranthineCodices/roact/commits{/sha}","git_commits_url":"https://api.github.com/repos/AmaranthineCodices/roact/git/commits{/sha}","comments_url":"https://api.github.com/repos/AmaranthineCodices/roact/comments{/number}","issue_comment_url":"https://api.github.com/repos/AmaranthineCodices/roact/issues/comments{/number}","contents_url":"https://api.github.com/repos/AmaranthineCodices/roact/contents/{+path}","compare_url":"https://api.github.com/repos/AmaranthineCodices/roact/compare/{base}...{head}","merges_url":"https://api.github.com/repos/AmaranthineCodices/roact/merges","archive_url":"https://api.github.com/repos/AmaranthineCodices/roact/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/AmaranthineCodices/roact/downloads","issues_url":"https://api.github.com/repos/AmaranthineCodices/roact/issues{/number}","pulls_url":"https://api.github.com/repos/AmaranthineCodices/roact/pulls{/number}","milestones_url":"https://api.github.com/repos/AmaranthineCodices/roact/milestones{/number}","notifications_url":"https://api.github.com/repos/AmaranthineCodices/roact/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/AmaranthineCodices/roact/labels{/name}","releases_url":"https://api.github.com/repos/AmaranthineCodices/roact/releases{/id}","deployments_url":"https://api.github.com/repos/AmaranthineCodices/roact/deployments","created_at":"2018-01-15T18:29:58Z","updated_at":"2018-05-15T01:36:48Z","pushed_at":"2018-05-15T22:00:53Z","git_url":"git://github.com/AmaranthineCodices/roact.git","ssh_url":"git@github.com:AmaranthineCodices/roact.git","clone_url":"https://github.com/AmaranthineCodices/roact.git","svn_url":"https://github.com/AmaranthineCodices/roact","homepage":"","size":197,"stargazers_count":0,"watchers_count":0,"language":"Lua","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":0,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0"},"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"Roblox:master","ref":"master","sha":"93358cabd77f780e1305553b571d40d56e7c93e3","user":{"login":"Roblox","id":4195619,"avatar_url":"https://avatars2.githubusercontent.com/u/4195619?v=4","gravatar_id":"","url":"https://api.github.com/users/Roblox","html_url":"https://github.com/Roblox","followers_url":"https://api.github.com/users/Roblox/followers","following_url":"https://api.github.com/users/Roblox/following{/other_user}","gists_url":"https://api.github.com/users/Roblox/gists{/gist_id}","starred_url":"https://api.github.com/users/Roblox/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Roblox/subscriptions","organizations_url":"https://api.github.com/users/Roblox/orgs","repos_url":"https://api.github.com/users/Roblox/repos","events_url":"https://api.github.com/users/Roblox/events{/privacy}","received_events_url":"https://api.github.com/users/Roblox/received_events","type":"Organization","site_admin":false},"repo":{"id":109429829,"name":"roact","full_name":"Roblox/roact","owner":{"login":"Roblox","id":4195619,"avatar_url":"https://avatars2.githubusercontent.com/u/4195619?v=4","gravatar_id":"","url":"https://api.github.com/users/Roblox","html_url":"https://github.com/Roblox","followers_url":"https://api.github.com/users/Roblox/followers","following_url":"https://api.github.com/users/Roblox/following{/other_user}","gists_url":"https://api.github.com/users/Roblox/gists{/gist_id}","starred_url":"https://api.github.com/users/Roblox/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Roblox/subscriptions","organizations_url":"https://api.github.com/users/Roblox/orgs","repos_url":"https://api.github.com/users/Roblox/repos","events_url":"https://api.github.com/users/Roblox/events{/privacy}","received_events_url":"https://api.github.com/users/Roblox/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Roblox/roact","description":"A view management library for Roblox Lua similar to React","fork":false,"url":"https://api.github.com/repos/Roblox/roact","forks_url":"https://api.github.com/repos/Roblox/roact/forks","keys_url":"https://api.github.com/repos/Roblox/roact/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Roblox/roact/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Roblox/roact/teams","hooks_url":"https://api.github.com/repos/Roblox/roact/hooks","issue_events_url":"https://api.github.com/repos/Roblox/roact/issues/events{/number}","events_url":"https://api.github.com/repos/Roblox/roact/events","assignees_url":"https://api.github.com/repos/Roblox/roact/assignees{/user}","branches_url":"https://api.github.com/repos/Roblox/roact/branches{/branch}","tags_url":"https://api.github.com/repos/Roblox/roact/tags","blobs_url":"https://api.github.com/repos/Roblox/roact/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Roblox/roact/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Roblox/roact/git/refs{/sha}","trees_url":"https://api.github.com/repos/Roblox/roact/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Roblox/roact/statuses/{sha}","languages_url":"https://api.github.com/repos/Roblox/roact/languages","stargazers_url":"https://api.github.com/repos/Roblox/roact/stargazers","contributors_url":"https://api.github.com/repos/Roblox/roact/contributors","subscribers_url":"https://api.github.com/repos/Roblox/roact/subscribers","subscription_url":"https://api.github.com/repos/Roblox/roact/subscription","commits_url":"https://api.github.com/repos/Roblox/roact/commits{/sha}","git_commits_url":"https://api.github.com/repos/Roblox/roact/git/commits{/sha}","comments_url":"https://api.github.com/repos/Roblox/roact/comments{/number}","issue_comment_url":"https://api.github.com/repos/Roblox/roact/issues/comments{/number}","contents_url":"https://api.github.com/repos/Roblox/roact/contents/{+path}","compare_url":"https://api.github.com/repos/Roblox/roact/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Roblox/roact/merges","archive_url":"https://api.github.com/repos/Roblox/roact/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Roblox/roact/downloads","issues_url":"https://api.github.com/repos/Roblox/roact/issues{/number}","pulls_url":"https://api.github.com/repos/Roblox/roact/pulls{/number}","milestones_url":"https://api.github.com/repos/Roblox/roact/milestones{/number}","notifications_url":"https://api.github.com/repos/Roblox/roact/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Roblox/roact/labels{/name}","releases_url":"https://api.github.com/repos/Roblox/roact/releases{/id}","deployments_url":"https://api.github.com/repos/Roblox/roact/deployments","created_at":"2017-11-03T18:29:50Z","updated_at":"2018-05-15T20:40:36Z","pushed_at":"2018-05-15T22:00:54Z","git_url":"git://github.com/Roblox/roact.git","ssh_url":"git@github.com:Roblox/roact.git","clone_url":"https://github.com/Roblox/roact.git","svn_url":"https://github.com/Roblox/roact","homepage":"","size":419,"stargazers_count":31,"watchers_count":31,"language":"Lua","has_issues":true,"has_projects":false,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":8,"mirror_url":null,"archived":false,"open_issues_count":36,"license":{"key":"apache-2.0","name":"Apache License 2.0","spdx_id":"Apache-2.0","url":"https://api.github.com/licenses/apache-2.0"},"forks":8,"open_issues":36,"watchers":31,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Roblox/roact/pulls/92"},"html":{"href":"https://github.com/Roblox/roact/pull/92"},"issue":{"href":"https://api.github.com/repos/Roblox/roact/issues/92"},"comments":{"href":"https://api.github.com/repos/Roblox/roact/issues/92/comments"},"review_comments":{"href":"https://api.github.com/repos/Roblox/roact/pulls/92/comments"},"review_comment":{"href":"https://api.github.com/repos/Roblox/roact/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Roblox/roact/pulls/92/commits"},"statuses":{"href":"https://api.github.com/repos/Roblox/roact/statuses/1f86eb10ad936d7b47f94483fa5ed87d24cd8f39"}},"author_association":"CONTRIBUTOR"}}
{"actor":{"display_login":"AmaranthineCodices"}}