feat: Allow to pass target directly to Popper component (#92)

The Popper target previously was assumed to be made available via
context from the Manager component. Instead it can now be passed in
directly via props. This change required making the popover manager
in the context optional.

Closes #17

Author: Gudahtt

README.md

@@ -39,7 +39,7 @@ const PopperExample = () => (
 )
 ```
 
-## Usage w/ child function
+## Usage with child function
 
 This is a useful way to interact with custom components. Just make sure you pass down the refs properly.
 
@@ -77,6 +77,49 @@ const PopperExample = () => (
 )
 ```
 
+## Usage without Manager
+
+It's generally easiest to let the `Manager` and `Target` components handle passing the target DOM element to the `Popper` component. However, you can pass a target [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) or a [referenceObject](https://popper.js.org/popper-documentation.html#referenceObject) directly into `Popper` if you need to.
+
+Handling DOM Elements from React can be complicated. The `Manager` and `Target` components handle these complexities for you, so their use is strongly recommended when using DOM Elements.
+
+```js
+import { PureComonent } from 'react'
+import { Popper, Arrow } from 'react-popper'
+
+class StandaloneExample extends PureComponent {
+  state = {
+    isOpen: false,
+  }
+
+  handleClick() = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen
+    }))
+  }
+
+  render() {
+    return (
+      <div>
+        <div
+          ref={(div) => this.target = div}
+          style={{ width: 120, height: 120, background: '#b4da55' }}
+          onClick={this.handleClick}
+        >
+          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
+        </div>
+        {this.state.isOpen && (
+          <Popper className="popper" target={this.target}>
+            Popper Content
+            <Arrow className="popper__arrow"/>
+          </Popper>
+        )}
+      </div>
+    )
+  }
+}
+```
+
 ## `Shared Props`
 
 `Target`, `Popper`, and `Arrow` all share the following props
@@ -124,11 +167,12 @@ A `Target`'s child may be one of the following:
 
 Your popper that gets attached to the `Target` component.
 
-Each `Popper` must be wrapped in a `Manager`, and each `Manager` can wrap multiple `Popper` components.
+Each `Popper` must either be wrapped in a `Manager`, or passed a `target` prop directly. Each `Manager` can wrap multiple `Popper` components.
 
 #### `placement`: PropTypes.oneOf(Popper.placements)
 #### `eventsEnabled`: PropTypes.bool
 #### `modifiers`: PropTypes.object
+#### `target`: PropTypes.oneOfType([PropTypes.instanceOf(Element), Popper.referenceObject])
 
 Passes respective options to a new [Popper instance](https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/popper-documentation.md#new-popperreference-popper-options). As for `onCreate` and `onUpdate`, these callbacks were intentionally left out in favor of using the [component lifecycle methods](https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle). If you have a good use case for these please feel free to file and issue and I will consider adding them in.
 

example/index.jsx

@@ -4,6 +4,9 @@ import ReactDOM from 'react-dom'
 import MultipleExample from './multiple'
 import AnimatedExample from './animated'
 import ModifiersExample from './modifiers'
+import ToggleableExample from './toggleable'
+import StandaloneExample from './standalone'
+import StandaloneObjectExample from './standaloneObject'
 
 import './main.css'
 
@@ -18,6 +21,15 @@ const App = () => (
     <div style={{ marginBottom: 200 }}>
       <ModifiersExample />
     </div>
+    <div style={{ marginBottom: 200 }}>
+      <ToggleableExample />
+    </div>
+    <div style={{ marginBottom: 200 }}>
+      <StandaloneExample />
+    </div>
+    <div style={{ marginBottom: 200 }}>
+      <StandaloneObjectExample />
+    </div>
   </div>
 )
 

example/standalone.jsx

@@ -0,0 +1,37 @@
+import React, { PureComponent } from 'react'
+import { Popper, Arrow } from '../src/react-popper'
+
+class StandaloneExample extends PureComponent {
+  state = {
+    isOpen: false,
+  }
+
+  handleClick = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }))
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Standalone Popper Example</h2>
+        <div
+          ref={div => (this.target = div)}
+          style={{ width: 120, height: 120, background: '#b4da55' }}
+          onClick={this.handleClick}
+        >
+          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
+        </div>
+        {this.state.isOpen && (
+          <Popper className="popper" target={this.target}>
+            Popper Content for Standalone example
+            <Arrow className="popper__arrow" />
+          </Popper>
+        )}
+      </div>
+    )
+  }
+}
+
+export default StandaloneExample

example/standaloneObject.jsx

@@ -0,0 +1,48 @@
+import React, { PureComponent } from 'react'
+import { Popper, Arrow } from '../src/react-popper'
+
+class StandaloneObjectExample extends PureComponent {
+  state = {
+    isOpen: false,
+  }
+
+  handleClick = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }))
+  }
+
+  render() {
+    const reference = {
+      getBoundingClientRect: () => ({
+        top: 10,
+        left: 100,
+        right: 150,
+        bottom: 90,
+        width: 50,
+        height: 80,
+      }),
+      clientWidth: 50,
+      clientHeight: 80,
+    }
+    return (
+      <div>
+        <h2>Standalone referenceObject Popper Example</h2>
+        <div
+          style={{ width: 120, height: 120, background: '#b4da55' }}
+          onClick={this.handleClick}
+        >
+          Click {this.state.isOpen ? 'to hide' : 'to show'} popper
+        </div>
+        {this.state.isOpen && (
+          <Popper className="popper" target={reference}>
+            Popper Content for Standalone example
+            <Arrow className="popper__arrow" />
+          </Popper>
+        )}
+      </div>
+    )
+  }
+}
+
+export default StandaloneObjectExample

example/toggleable.jsx

@@ -0,0 +1,38 @@
+import React, { PureComponent } from 'react'
+import { Manager, Target, Popper, Arrow } from '../src/react-popper'
+
+class ToggleableExample extends PureComponent {
+  state = {
+    isOpen: false,
+  }
+
+  handleClick = () => {
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen,
+    }))
+  }
+
+  render() {
+    return (
+      <div>
+        <h2>Toggleable Popper Example</h2>
+        <Manager>
+          <Target
+            style={{ width: 120, height: 120, background: '#b4da55' }}
+            onClick={this.handleClick}
+          >
+            Click {this.state.isOpen ? 'to hide' : 'to show'} popper
+          </Target>
+          {this.state.isOpen && (
+            <Popper className="popper">
+              Popper Content for Toggleable Example
+              <Arrow className="popper__arrow" />
+            </Popper>
+          )}
+        </Manager>
+      </div>
+    )
+  }
+}
+
+export default ToggleableExample

src/Popper.jsx

@@ -4,7 +4,7 @@ import PopperJS from 'popper.js'
 
 class Popper extends Component {
   static contextTypes = {
-    popperManager: PropTypes.object.isRequired,
+    popperManager: PropTypes.object,
   }
 
   static childContextTypes = {
@@ -18,6 +18,14 @@ class Popper extends Component {
     eventsEnabled: PropTypes.bool,
     modifiers: PropTypes.object,
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    target: PropTypes.oneOfType([
+      PropTypes.instanceOf(Element),
+      PropTypes.shape({
+        getBoundingClientRect: PropTypes.func.isRequired,
+        clientWidth: PropTypes.number.isRequired,
+        clientHeight: PropTypes.number.isRequired,
+      }),
+    ]),
   }
 
   static defaultProps = {
@@ -41,7 +49,8 @@ class Popper extends Component {
   componentDidUpdate(lastProps) {
     if (
       lastProps.placement !== this.props.placement ||
-      lastProps.eventsEnabled !== this.props.eventsEnabled
+      lastProps.eventsEnabled !== this.props.eventsEnabled ||
+      lastProps.target !== this.props.target
     ) {
       this._destroyPopper()
       this._createPopper()
@@ -60,6 +69,16 @@ class Popper extends Component {
   }
 
   _getTargetNode = () => {
+    if (this.props.target) {
+      return this.props.target
+    } else if (
+      !this.context.popperManager ||
+      !this.context.popperManager.getTargetNode()
+    ) {
+      throw new Error(
+        'Target missing. Popper must be given a target from the Popper Manager, or as a prop.',
+      )
+    }
     return this.context.popperManager.getTargetNode()
   }