{"action":"created","comment":{"url":"https://api.github.com/repos/facebook/react/pulls/comments/140939410","pull_request_review_id":65080676,"id":140939410,"diff_hunk":"@@ -0,0 +1,89 @@\n+---\n+id: portals\n+title: Portals\n+permalink: docs/portals.html\n+---\n+\n+Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n+\n+```js\n+ReactDOM.createPortal(\n+  child,\n+  container\n+);\n+```\n+\n+The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.\n+\n+## Usage\n+\n+Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:\n+\n+```js{4,6}\n+render() {\n+  // React mounts a new div and renders the children into it\n+  return (\n+    <div>\n+      {this.props.children}\n+    </div>\n+  );\n+}\n+```\n+\n+However, sometimes it's useful to insert a child into a different location in the DOM:\n+\n+```js{6}\n+render() {\n+  // React does *not* create a new div. It renders the children into `divNode`.\n+  // `divNode` is any valid DOM node, regardless of its location in the DOM.\n+  return React.createPortal(\n+    this.props.children,\n+    divNode,\n+  );\n+}\n+```\n+\n+A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually \"break out\" of its container.","path":"docs/docs/portals.md","position":46,"original_position":46,"commit_id":"5778629f62f99b58c41d50bc96bbca805dd1102f","original_commit_id":"5778629f62f99b58c41d50bc96bbca805dd1102f","user":{"login":"sophiebits","id":6820,"avatar_url":"https://avatars2.githubusercontent.com/u/6820?v=4","gravatar_id":"","url":"https://api.github.com/users/sophiebits","html_url":"https://github.com/sophiebits","followers_url":"https://api.github.com/users/sophiebits/followers","following_url":"https://api.github.com/users/sophiebits/following{/other_user}","gists_url":"https://api.github.com/users/sophiebits/gists{/gist_id}","starred_url":"https://api.github.com/users/sophiebits/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sophiebits/subscriptions","organizations_url":"https://api.github.com/users/sophiebits/orgs","repos_url":"https://api.github.com/users/sophiebits/repos","events_url":"https://api.github.com/users/sophiebits/events{/privacy}","received_events_url":"https://api.github.com/users/sophiebits/received_events","type":"User","site_admin":false},"body":"Can we say explicitly somewhere that this is particularly useful for implementing modal dialogs, hovercards, and tooltips? Helps understand what it's for. Maybe worth noting the a11y requirements too though so people don't think it's too easy.","created_at":"2017-09-26T01:33:01Z","updated_at":"2017-09-26T01:34:11Z","html_url":"https://github.com/facebook/react/pull/10824#discussion_r140939410","pull_request_url":"https://api.github.com/repos/facebook/react/pulls/10824","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/comments/140939410"},"html":{"href":"https://github.com/facebook/react/pull/10824#discussion_r140939410"},"pull_request":{"href":"https://api.github.com/repos/facebook/react/pulls/10824"}}},"pull_request":{"url":"https://api.github.com/repos/facebook/react/pulls/10824","id":143007636,"html_url":"https://github.com/facebook/react/pull/10824","diff_url":"https://github.com/facebook/react/pull/10824.diff","patch_url":"https://github.com/facebook/react/pull/10824.patch","issue_url":"https://api.github.com/repos/facebook/react/issues/10824","number":10824,"state":"open","locked":false,"title":"Doc updates for React 16 + blog post","user":{"login":"acdlite","id":3624098,"avatar_url":"https://avatars0.githubusercontent.com/u/3624098?v=4","gravatar_id":"","url":"https://api.github.com/users/acdlite","html_url":"https://github.com/acdlite","followers_url":"https://api.github.com/users/acdlite/followers","following_url":"https://api.github.com/users/acdlite/following{/other_user}","gists_url":"https://api.github.com/users/acdlite/gists{/gist_id}","starred_url":"https://api.github.com/users/acdlite/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acdlite/subscriptions","organizations_url":"https://api.github.com/users/acdlite/orgs","repos_url":"https://api.github.com/users/acdlite/repos","events_url":"https://api.github.com/users/acdlite/events{/privacy}","received_events_url":"https://api.github.com/users/acdlite/received_events","type":"User","site_admin":false},"body":"Shhhhh nothing to see here.","created_at":"2017-09-25T23:33:56Z","updated_at":"2017-09-26T01:34:11Z","closed_at":null,"merged_at":null,"merge_commit_sha":"1a57705a71c4ca2803ec195d7032492ace2dc677","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/facebook/react/pulls/10824/commits","review_comments_url":"https://api.github.com/repos/facebook/react/pulls/10824/comments","review_comment_url":"https://api.github.com/repos/facebook/react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/facebook/react/issues/10824/comments","statuses_url":"https://api.github.com/repos/facebook/react/statuses/5778629f62f99b58c41d50bc96bbca805dd1102f","head":{"label":"acdlite:react16docs","ref":"react16docs","sha":"5778629f62f99b58c41d50bc96bbca805dd1102f","user":{"login":"acdlite","id":3624098,"avatar_url":"https://avatars0.githubusercontent.com/u/3624098?v=4","gravatar_id":"","url":"https://api.github.com/users/acdlite","html_url":"https://github.com/acdlite","followers_url":"https://api.github.com/users/acdlite/followers","following_url":"https://api.github.com/users/acdlite/following{/other_user}","gists_url":"https://api.github.com/users/acdlite/gists{/gist_id}","starred_url":"https://api.github.com/users/acdlite/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acdlite/subscriptions","organizations_url":"https://api.github.com/users/acdlite/orgs","repos_url":"https://api.github.com/users/acdlite/repos","events_url":"https://api.github.com/users/acdlite/events{/privacy}","received_events_url":"https://api.github.com/users/acdlite/received_events","type":"User","site_admin":false},"repo":{"id":45281256,"name":"react","full_name":"acdlite/react","owner":{"login":"acdlite","id":3624098,"avatar_url":"https://avatars0.githubusercontent.com/u/3624098?v=4","gravatar_id":"","url":"https://api.github.com/users/acdlite","html_url":"https://github.com/acdlite","followers_url":"https://api.github.com/users/acdlite/followers","following_url":"https://api.github.com/users/acdlite/following{/other_user}","gists_url":"https://api.github.com/users/acdlite/gists{/gist_id}","starred_url":"https://api.github.com/users/acdlite/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/acdlite/subscriptions","organizations_url":"https://api.github.com/users/acdlite/orgs","repos_url":"https://api.github.com/users/acdlite/repos","events_url":"https://api.github.com/users/acdlite/events{/privacy}","received_events_url":"https://api.github.com/users/acdlite/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/acdlite/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":true,"url":"https://api.github.com/repos/acdlite/react","forks_url":"https://api.github.com/repos/acdlite/react/forks","keys_url":"https://api.github.com/repos/acdlite/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/acdlite/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/acdlite/react/teams","hooks_url":"https://api.github.com/repos/acdlite/react/hooks","issue_events_url":"https://api.github.com/repos/acdlite/react/issues/events{/number}","events_url":"https://api.github.com/repos/acdlite/react/events","assignees_url":"https://api.github.com/repos/acdlite/react/assignees{/user}","branches_url":"https://api.github.com/repos/acdlite/react/branches{/branch}","tags_url":"https://api.github.com/repos/acdlite/react/tags","blobs_url":"https://api.github.com/repos/acdlite/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/acdlite/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/acdlite/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/acdlite/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/acdlite/react/statuses/{sha}","languages_url":"https://api.github.com/repos/acdlite/react/languages","stargazers_url":"https://api.github.com/repos/acdlite/react/stargazers","contributors_url":"https://api.github.com/repos/acdlite/react/contributors","subscribers_url":"https://api.github.com/repos/acdlite/react/subscribers","subscription_url":"https://api.github.com/repos/acdlite/react/subscription","commits_url":"https://api.github.com/repos/acdlite/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/acdlite/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/acdlite/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/acdlite/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/acdlite/react/contents/{+path}","compare_url":"https://api.github.com/repos/acdlite/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/acdlite/react/merges","archive_url":"https://api.github.com/repos/acdlite/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/acdlite/react/downloads","issues_url":"https://api.github.com/repos/acdlite/react/issues{/number}","pulls_url":"https://api.github.com/repos/acdlite/react/pulls{/number}","milestones_url":"https://api.github.com/repos/acdlite/react/milestones{/number}","notifications_url":"https://api.github.com/repos/acdlite/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/acdlite/react/labels{/name}","releases_url":"https://api.github.com/repos/acdlite/react/releases{/id}","deployments_url":"https://api.github.com/repos/acdlite/react/deployments","created_at":"2015-10-30T23:18:48Z","updated_at":"2017-09-22T16:12:06Z","pushed_at":"2017-09-26T00:04:43Z","git_url":"git://github.com/acdlite/react.git","ssh_url":"git@github.com:acdlite/react.git","clone_url":"https://github.com/acdlite/react.git","svn_url":"https://github.com/acdlite/react","homepage":"https://facebook.github.io/react/","size":106918,"stargazers_count":3,"watchers_count":3,"language":"JavaScript","has_issues":false,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":1,"mirror_url":null,"open_issues_count":0,"forks":1,"open_issues":0,"watchers":3,"default_branch":"master"}},"base":{"label":"facebook:gatsby","ref":"gatsby","sha":"553c4e1fcea2d88fa775fe9ec8f2ebfaf917b37b","user":{"login":"facebook","id":69631,"avatar_url":"https://avatars3.githubusercontent.com/u/69631?v=4","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"repo":{"id":10270250,"name":"react","full_name":"facebook/react","owner":{"login":"facebook","id":69631,"avatar_url":"https://avatars3.githubusercontent.com/u/69631?v=4","gravatar_id":"","url":"https://api.github.com/users/facebook","html_url":"https://github.com/facebook","followers_url":"https://api.github.com/users/facebook/followers","following_url":"https://api.github.com/users/facebook/following{/other_user}","gists_url":"https://api.github.com/users/facebook/gists{/gist_id}","starred_url":"https://api.github.com/users/facebook/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/facebook/subscriptions","organizations_url":"https://api.github.com/users/facebook/orgs","repos_url":"https://api.github.com/users/facebook/repos","events_url":"https://api.github.com/users/facebook/events{/privacy}","received_events_url":"https://api.github.com/users/facebook/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/facebook/react","description":"A declarative, efficient, and flexible JavaScript library for building user interfaces.","fork":false,"url":"https://api.github.com/repos/facebook/react","forks_url":"https://api.github.com/repos/facebook/react/forks","keys_url":"https://api.github.com/repos/facebook/react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/facebook/react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/facebook/react/teams","hooks_url":"https://api.github.com/repos/facebook/react/hooks","issue_events_url":"https://api.github.com/repos/facebook/react/issues/events{/number}","events_url":"https://api.github.com/repos/facebook/react/events","assignees_url":"https://api.github.com/repos/facebook/react/assignees{/user}","branches_url":"https://api.github.com/repos/facebook/react/branches{/branch}","tags_url":"https://api.github.com/repos/facebook/react/tags","blobs_url":"https://api.github.com/repos/facebook/react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/facebook/react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/facebook/react/git/refs{/sha}","trees_url":"https://api.github.com/repos/facebook/react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/facebook/react/statuses/{sha}","languages_url":"https://api.github.com/repos/facebook/react/languages","stargazers_url":"https://api.github.com/repos/facebook/react/stargazers","contributors_url":"https://api.github.com/repos/facebook/react/contributors","subscribers_url":"https://api.github.com/repos/facebook/react/subscribers","subscription_url":"https://api.github.com/repos/facebook/react/subscription","commits_url":"https://api.github.com/repos/facebook/react/commits{/sha}","git_commits_url":"https://api.github.com/repos/facebook/react/git/commits{/sha}","comments_url":"https://api.github.com/repos/facebook/react/comments{/number}","issue_comment_url":"https://api.github.com/repos/facebook/react/issues/comments{/number}","contents_url":"https://api.github.com/repos/facebook/react/contents/{+path}","compare_url":"https://api.github.com/repos/facebook/react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/facebook/react/merges","archive_url":"https://api.github.com/repos/facebook/react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/facebook/react/downloads","issues_url":"https://api.github.com/repos/facebook/react/issues{/number}","pulls_url":"https://api.github.com/repos/facebook/react/pulls{/number}","milestones_url":"https://api.github.com/repos/facebook/react/milestones{/number}","notifications_url":"https://api.github.com/repos/facebook/react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/facebook/react/labels{/name}","releases_url":"https://api.github.com/repos/facebook/react/releases{/id}","deployments_url":"https://api.github.com/repos/facebook/react/deployments","created_at":"2013-05-24T16:15:54Z","updated_at":"2017-09-26T01:30:46Z","pushed_at":"2017-09-26T01:18:05Z","git_url":"git://github.com/facebook/react.git","ssh_url":"git@github.com:facebook/react.git","clone_url":"https://github.com/facebook/react.git","svn_url":"https://github.com/facebook/react","homepage":"https://facebook.github.io/react/","size":131678,"stargazers_count":76417,"watchers_count":76417,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":14499,"mirror_url":null,"open_issues_count":748,"forks":14499,"open_issues":748,"watchers":76417,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/facebook/react/pulls/10824"},"html":{"href":"https://github.com/facebook/react/pull/10824"},"issue":{"href":"https://api.github.com/repos/facebook/react/issues/10824"},"comments":{"href":"https://api.github.com/repos/facebook/react/issues/10824/comments"},"review_comments":{"href":"https://api.github.com/repos/facebook/react/pulls/10824/comments"},"review_comment":{"href":"https://api.github.com/repos/facebook/react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/facebook/react/pulls/10824/commits"},"statuses":{"href":"https://api.github.com/repos/facebook/react/statuses/5778629f62f99b58c41d50bc96bbca805dd1102f"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"sophiebits"}}