{"repo":"httptoolkit/react-reverse-portal","free":true,"listed":false,"github":"https://github.com/httptoolkit/react-reverse-portal","clone":"git clone https://github.com/httptoolkit/react-reverse-portal.git","description":"React reparenting :atom_symbol: Build an element once, move it anywhere","language":"TypeScript","stars":1048,"topics":["portal","react","reactjs","reparenting","virtual-dom"],"license":"Apache-2.0","category":"dev-tools","readme_excerpt":"React-Reverse-Portal Part of HTTP Toolkit: powerful tools for building, testing & debugging HTTP(S) Build an element once, move it anywhere Added in React 16.0, React's built-in portals let you render an element in a meaningful location within your React component hierarchy, but then send the output to a DOM node elsewhere. Reverse portals let you do the opposite: pull a rendered element from elsewhere into a target location within your React tree. This allows you to reparent DOM nodes, so you can move React-rendered elements around your React tree and the DOM without re-rendering them. Reverse portals also allow you to take a React-rendered node out of the DOM entirely, and return it later, all without rerendering the node. (In a rush? Check out the examples) This is useful in a few cases: Your react elements have internal state, and you'd like to persist that state but render the element somewhere new. Your DOM elements have built-in state (e.g. a playing element), and you'd like to move the element elsewhere without losing that. Your elements are expensive to render, and you'd like to render them once and then place/unplace them later (e.g. a reusable pool of expensive-to-render elements that can be shared among different parts of your application). You want to define the contents of an element separately from where it actually appears in the tree, e.g. modals, breadcrumbs, etc (possible with normal portals, but made more flexible & declarative with reverse portals) In HTT","default_branch":null,"files":null,"tree":[],"storefront":"/r/httptoolkit","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/httptoolkit/react-reverse-portal/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}