Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregberge/react-teleporter
Teleport React components in the same React tree 📡
https://github.com/gregberge/react-teleporter
Last synced: 7 days ago
JSON representation
Teleport React components in the same React tree 📡
- Host: GitHub
- URL: https://github.com/gregberge/react-teleporter
- Owner: gregberge
- License: mit
- Created: 2019-06-10T19:04:55.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T09:12:50.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T15:32:58.588Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.57 MB
- Stars: 1,130
- Watchers: 4
- Forks: 18
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - react-teleporter - Teleport React components in the same React tree 📡 (JavaScript)
- awesome-list - react-teleporter
README
# react-teleporter
[](https://github.com/gregberge/react-teleporter/blob/main/LICENSE)
[](https://www.npmjs.com/package/react-teleporter)
[](https://bundlephobia.com/package/react-teleporter)
[](https://github.com/gregberge/react-teleporter/actions/workflows/ci.yml)
[](https://codecov.io/gh/gregberge/react-teleporter)
Teleport React components in the same React tree.
👉 [**Read how to use it to create scalable layouts**](https://gregberge.com/blog/react-scalable-layout)
👉 [**Checkout the demo on CodeSandbox**](https://codesandbox.io/s/react-teleporter-demo-ryklv)
```bash
npm install react-teleporter
```
## Example
```js
import { createTeleporter } from "react-teleporter";
const StatusBar = createTeleporter();
function Header() {
return (
);
}
function Page() {
return (
{/* Teleport "Loading..." into the header */}
Loading...
);
}
function App() {
return (
);
}
```
## Why?
In complex app, you may have to configure a part of the application from another. If you know [react-helmet](https://github.com/nfl/react-helmet) it is the same philosophy. You want to configure a part of your application from another place.
## Recipes
### Use another target element
Use `as` property on target to specify another tag.
```js
const Teleporter = createTeleporter()
```
> Be careful of specifying an element with a ref to a DOM element, it uses [React Portals](https://reactjs.org/docs/portals.html) under the hood.
### Use props on target
All props are forwarded to target.
```js
const Teleporter = createTeleporter()
```
### Create a custom target ref
Use `useTargetRef` to create a custom target ref.
```js
const Teleporter = createTeleporter();
function CustomTarget() {
const targetRef = Teleporter.useTargetRef();
return
;
}
```
### Use multiple sources
By default only one `Source` is allowed to be injected into a `Target`. Sometimes you may want to inject multiple sources into a single target. Create teleporter with `{ multiSources: true }` option.
```js
const Teleporter = createTeleporter({ multiSources: true })
// The target will contains the two links
```
### Use function as children
Useful for having access to the `Target` element. E.g., to dispatch an event through the `Target` when something happens in the `Source`.
```js
const Teleporter = createTeleporter();
const forwardEvent = (element) => (event) =>
element.dispatch(new Event(event.type, event));
{(element) =>
}
;
```
## API
### createTeleporter
`createTeleporter` is the only method exposed by this package. It returns an object containing a `Target`, a `Source` and a `useTargetRef` to create a custom target.
```js
import { createTeleporter } from "react-teleporter";
const Teleporter = createTeleporter();
```