react-teleporter - npm Package Compare versions

Comparing version 3.0.2 to 3.1.0

dist/index.d.ts

@@ -13,2 +13,3 @@ import * as React from 'react';
 };
+declare type ChildrenFunction = (target: Element) => React.ReactNode;
 interface CreateTeleporterOptions {
@@ -22,3 +23,3 @@ multiSources?: Boolean;
     Source: React.FC<{
-        children: React.ReactNode;
+        children: React.ReactNode | ChildrenFunction;
     }>;
@@ -25,0 +26,0 @@ Target: ComponentWithAs<{}, "div">;

package.json

 {
   "name": "react-teleporter",
   "description": "Teleport React components in the same React tree.",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "sideEffects": false,
@@ -6,0 +6,0 @@ "type": "module",

README.md

@@ -112,2 +112,17 @@ # react-teleporter
 
+### 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));
+
+<Teleporter.Source>
+  {(element) => <div onClick={forwardEvent(element)}></div>}
+</Teleporter.Source>;
+```
+
 ## API
@@ -114,0 +129,0 @@

No alert changes

Improved metrics

Total package byte prevSize

12575

increased by7.32%

Lines of code

31

increased by3.33%

Number of lines in readme file

138

increased by12.2%

No dependency changes