feat: add multiple sources support (#16)

README.md

@@ -94,6 +94,24 @@ function CustomTarget() {
 }
 ```
 
+### 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 })
+
+<Teleporter.Source multiple>
+  <a href="#">A link</a>
+</Teleporter.Source>
+
+<Teleporter.Source multiple>
+  <a href="#">Another link</a>
+</Teleporter.Source>
+
+// The target will contains the two links
+```
+
 ## API
 
 ### createTeleporter

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-export function createTeleporter() {
+export function createTeleporter({ multiSources } = {}) {
   const context = {}
 
   function setElement(element) {
@@ -30,7 +30,9 @@ export function createTeleporter() {
 
       if (context.set) {
         previousSet = context.set
-        context.set.current(null)
+        if (!multiSources) {
+          context.set.current(null)
+        }
       }
 
       context.set = setRef

src/index.test.js

@@ -250,6 +250,24 @@ describe('teleporter', () => {
       expect(getByTestId('target')).toHaveTextContent('A')
     })
 
+    it('allows multiple sources using `multiSources` option', () => {
+      const Teleporter = createTeleporter({ multiSources: true })
+
+      const { getByTestId } = render(
+        <div>
+          <div data-testid="target">
+            <Teleporter.Target />
+          </div>
+          <div>
+            <Teleporter.Source>A</Teleporter.Source>
+            <Teleporter.Source>B</Teleporter.Source>
+          </div>
+        </div>,
+      )
+
+      expect(getByTestId('target')).toHaveTextContent('AB')
+    })
+
     it('handles uses the latest target defined', () => {
       const Teleporter = createTeleporter()