{"id":13626522,"url":"https://github.com/paol-imi/react-reparenting","last_synced_at":"2025-04-16T14:33:56.490Z","repository":{"id":38992855,"uuid":"256028051","full_name":"paol-imi/react-reparenting","owner":"paol-imi","description":"The reparenting tools for React","archived":false,"fork":false,"pushed_at":"2023-06-22T18:16:30.000Z","size":13144,"stargazers_count":478,"open_issues_count":18,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-01T23:38:18.673Z","etag":null,"topics":["fiber","portal","react","reparentable","reparenting"],"latest_commit_sha":null,"homepage":"https://paol-imi.github.io/react-reparenting","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paol-imi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-04-15T20:23:40.000Z","updated_at":"2024-09-21T09:22:09.000Z","dependencies_parsed_at":"2024-01-06T07:57:24.520Z","dependency_job_id":"1c4bfb06-0c35-45cf-ade6-1f4835cc51af","html_url":"https://github.com/paol-imi/react-reparenting","commit_stats":{"total_commits":97,"total_committers":2,"mean_commits":48.5,"dds":"0.010309278350515427","last_synced_commit":"9923457560f0527bdeed07fcaf92b9fa8a144e66"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Freact-reparenting","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Freact-reparenting/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Freact-reparenting/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paol-imi%2Freact-reparenting/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paol-imi","download_url":"https://codeload.github.com/paol-imi/react-reparenting/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223716572,"owners_count":17191070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fiber","portal","react","reparentable","reparenting"],"created_at":"2024-08-01T21:02:21.480Z","updated_at":"2024-11-08T16:30:53.542Z","avatar_url":"https://github.com/paol-imi.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \n\u003cbr /\u003e\n \n\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/react-reparenting/master/website/static/logo/logo.png\" width=\"25%\" /\u003e\u003cbr /\u003e\u003cbr /\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/react-reparenting/master/website/static/logo/reactreparenting.png\" width=\"35%\" /\u003e\n\n\u003ch1\u003e\u003c/h1\u003e\n\n**Simple**, **intuitive** and **configurable** tools to manage **reparenting** with [`React`](https://reactjs.org/)\n\n[![npm](https://img.shields.io/npm/v/react-reparenting.svg?style=flat-square)](http://npm.im/react-reparenting)\n[![React: Tools](https://img.shields.io/badge/React-Tools-26C9FF?style=flat-square\u0026logo=react)](http://npm.im/react-reparenting)\n[![Circle Ci](https://img.shields.io/circleci/build/github/Paol-imi/react-reparenting?style=flat-square)](https://app.circleci.com/pipelines/github/Paol-imi/react-reparenting)\n[![Codecov](https://img.shields.io/codecov/c/github/paol-imi/react-reparenting?color=44cc11\u0026logo=codecov\u0026style=flat-square)](https://codecov.io/gh/Paol-imi/react-reparenting)\n[![Code style: Prettier](https://img.shields.io/badge/Code_style-Prettier-ff69b4.svg?style=flat-square\u0026logo=prettier)](https://prettier.io/)\n[![Types: Typescript](https://img.shields.io/badge/Types-Typescript-red?style=flat-square\u0026logo=typescript)](https://www.typescriptlang.org/)\n\n\u003cimg src=\"https://raw.githubusercontent.com/Paol-imi/react-reparenting/master/website/static/gifs/reparenting.gif\" width=\"68%\" /\u003e\n\n\u003c/div\u003e\n\n## What does it do? 🤨\n\nImagine that you have two Parent components, both with some Child components. To `transfer` a Child from one Parent to another, the components must be `re-rendered` with that Child in its new Parent. This procedure has obvious usability and performance `limits`, the transferred component is unmounted, re-mounted and loses its internal state, as well as all the nodes it has generated (such as a `\u003cdiv\u003e`).\n\nReact does not yet offer specific APIs to solve this problem, in many cases we try to deal with it using `Portals` and `refs`. This approach presents other problems, it is difficult to implement for large-scale apps and above all it does not give the feeling of being very `\"Reactive\"`. In fact, portals have been designed for other purposes, citing the documentation:\n\n\u003e Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n\nThis process is more related to the DOM, at `\"React level\"` the Child is still part of the same Parent. This is where `React-reparenting` intervenes.\n\nThis package offers `easy` and `intuitive` tools to solve this problem. With a few lines of code you will be able to transfer your components, without them being re-mounted or losing their internal state.\n\n| ⚠️  | This is an experimental technology that interacts with React [**internals**](https://paol-imi.github.io/react-reparenting/docs/introduction#under-the-hood), you shouldn't rely on them in your production code. The React team could introduce breaking changes in future releases without following the semver rules. |\n| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n\n## Documentation 📖\n\nYou can find the full documentation [**here**](https://paol-imi.github.io/react-reparenting).\n\n## Examples 💡\n\nCheck out the [**examples**](https://paol-imi.github.io/react-reparenting/examples) available on Codesandbox.\n\n## License ©\n\nCopyright © 2020 [**Paolo Longo**](https://github.com/Paol-imi) • [**MIT license**](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaol-imi%2Freact-reparenting","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaol-imi%2Freact-reparenting","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaol-imi%2Freact-reparenting/lists"}