{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/12657","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/12657/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/12657/comments","events_url":"https://api.github.com/repos/facebook/react/issues/12657/events","html_url":"https://github.com/facebook/react/issues/12657","id":316047956,"number":12657,"title":"[Question] Best way to get element DOM reference","user":{"login":"inomdzhon","id":5850354,"avatar_url":"https://avatars0.githubusercontent.com/u/5850354?v=4","gravatar_id":"","url":"https://api.github.com/users/inomdzhon","html_url":"https://github.com/inomdzhon","followers_url":"https://api.github.com/users/inomdzhon/followers","following_url":"https://api.github.com/users/inomdzhon/following{/other_user}","gists_url":"https://api.github.com/users/inomdzhon/gists{/gist_id}","starred_url":"https://api.github.com/users/inomdzhon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/inomdzhon/subscriptions","organizations_url":"https://api.github.com/users/inomdzhon/orgs","repos_url":"https://api.github.com/users/inomdzhon/repos","events_url":"https://api.github.com/users/inomdzhon/events{/privacy}","received_events_url":"https://api.github.com/users/inomdzhon/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-04-19T21:30:02Z","updated_at":"2018-04-20T13:11:15Z","closed_at":null,"author_association":"NONE","body":"**Preface**\r\n\r\nI'm writing popup component, whose task is to be positioned content (next call **B**) relative target (next call **A**). **B** can have arrow as optional (next call...**arrow**). Popup component is like **core** for positioning. It can be used to create a drop-down list, tooltip or something else.\r\n\r\n![image](https://user-images.githubusercontent.com/5850354/39014028-d5f2c96e-4421-11e8-8fff-76419b68dcca.png)\r\n\r\nFor resolve this task, we need to get:\r\n1. DOM reference of **B**\r\n2. DOM reference of **A**\r\n3. DOM reference of **arrow**\r\n\r\nGo to use my realisation as an example — [sandbox](https://inomdzhon.github.io/react-popup/) ([source](https://github.com/inomdzhon/react-popup/tree/master/Popup)). Here I take:\r\n\r\n- **A** through `reference` props\r\n- **B** and **arrow** from `ref` in Popup `render()`\r\n\r\nAfter all calculated I put **B** in DOM with `React.createPortal`. _Note:_ for positioning I use [popper.js](https://popper.js.org/) library.\r\n\r\n**Problem**\r\n\r\nFor more flexibility I want transfer to Popup component **render function**. Like this:\r\n\r\n```\r\n<Popup arrow reference={this.elemTarget}>\r\n  {({ styles, arrowStyles, placement  }) => {\r\n      <div {/* <-- our B */}\r\n         style={styles}\r\n         data-placement={placement}\r\n      >\r\n         <div style={arrowStyles} /> {/* <-- our arrow */}\r\n         Some text/component\r\n      </div>\r\n  }}\r\n</Popup>\r\n```\r\n\r\nIt can be more useful for:\r\n\r\n- smooth transitions from one **A** to next **A** (animating `styles` in parent component or in store)\r\n- custom inner structure\r\n\r\nNow I don't know right way to get reference of **B** and **arrow**. Maybe I can get **B** with `ReactDOM.findDOMNode` in Popup `render()`, but what about the **arrow**?\r\n\r\nThanks.\r\nThanks for what you do ✌️"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/383091026","html_url":"https://github.com/facebook/react/issues/12657#issuecomment-383091026","issue_url":"https://api.github.com/repos/facebook/react/issues/12657","id":383091026,"user":{"login":"inomdzhon","id":5850354,"avatar_url":"https://avatars0.githubusercontent.com/u/5850354?v=4","gravatar_id":"","url":"https://api.github.com/users/inomdzhon","html_url":"https://github.com/inomdzhon","followers_url":"https://api.github.com/users/inomdzhon/followers","following_url":"https://api.github.com/users/inomdzhon/following{/other_user}","gists_url":"https://api.github.com/users/inomdzhon/gists{/gist_id}","starred_url":"https://api.github.com/users/inomdzhon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/inomdzhon/subscriptions","organizations_url":"https://api.github.com/users/inomdzhon/orgs","repos_url":"https://api.github.com/users/inomdzhon/repos","events_url":"https://api.github.com/users/inomdzhon/events{/privacy}","received_events_url":"https://api.github.com/users/inomdzhon/received_events","type":"User","site_admin":false},"created_at":"2018-04-20T13:11:15Z","updated_at":"2018-04-20T13:11:15Z","author_association":"NONE","body":"Sorry about this. I saw `Type Question` in labels and thought it's right place for question 😕\r\n\r\nOk, I go to other forum with my question.\r\n\r\n`react-tippy` solve only tooltip tasks and not clear react way, I think.\r\n\r\nThanks."}}
{"actor":{"display_login":"inomdzhon"}}