Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paol-imi/react-reparenting
The reparenting tools for React
https://github.com/paol-imi/react-reparenting
fiber portal react reparentable reparenting
Last synced: 6 days ago
JSON representation
The reparenting tools for React
- Host: GitHub
- URL: https://github.com/paol-imi/react-reparenting
- Owner: paol-imi
- License: mit
- Created: 2020-04-15T20:23:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-22T18:16:30.000Z (over 1 year ago)
- Last Synced: 2024-10-01T23:38:18.673Z (about 1 month ago)
- Topics: fiber, portal, react, reparentable, reparenting
- Language: TypeScript
- Homepage: https://paol-imi.github.io/react-reparenting
- Size: 12.5 MB
- Stars: 478
- Watchers: 6
- Forks: 8
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**Simple**, **intuitive** and **configurable** tools to manage **reparenting** with [`React`](https://reactjs.org/)
[](http://npm.im/react-reparenting)
[](http://npm.im/react-reparenting)
[](https://app.circleci.com/pipelines/github/Paol-imi/react-reparenting)
[](https://codecov.io/gh/Paol-imi/react-reparenting)
[](https://prettier.io/)
[](https://www.typescriptlang.org/)
## What does it do? 🤨
Imagine 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 `
`).
React 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:
> Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
This 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.
This 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.
| ⚠️ | 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. |
| --- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
## Documentation 📖
You can find the full documentation [**here**](https://paol-imi.github.io/react-reparenting).
## Examples 💡
Check out the [**examples**](https://paol-imi.github.io/react-reparenting/examples) available on Codesandbox.
## License ©
Copyright © 2020 [**Paolo Longo**](https://github.com/Paol-imi) • [**MIT license**](LICENSE).