react-bootstrap / react-overlays

Utilities for creating robust overlay components

HEADS UP! this repo is deprecated and not receiving any more updates.

Don't worry though, that's because it's been succeeded by https://github.com/react-restart/ui which is built off of react-overlays by the same team.

react-overlays

Utilities for creating robust overlay components.

Documentation

https://react-bootstrap.github.io/react-overlays

Installation

npm install --save react-overlays

Notes

All of these utilities have been abstracted out of React-Bootstrap in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.

If you are looking for more complete overlays, modals, or tooltips – something you can use out-of-the-box – check out React-Bootstrap, which is built using these components.

react-overlays's Issues

onWindowScroll never called

On Chrome the scroll event attached to windowis never called and element positioning is never updated. Event is supposedly attached to the global window object but when I tried to debug it the callback function is never called (breakpoint below).

Overlay && Transition

I've looked in every documentation I've found and waded through many blog articles but I couldn't find an example that shows a Overlay component in conjunction with a Transition component.

I'm building a simple ToolTip component on the basis of your overlay example:

Overlay:

        return (
                <Overlay
                    show={this.state.showWarning}
                    onHide={() => this.setState({ showWarning: false })}
                    placement={'top'}
                    container={this.refs.compareWrap}
                    target={ (props) => ReactDOM.findDOMNode(this.refs.compareLink) }
                    transition={TransitionTooltip}>
                        <ToolTip>
                            <span>My tooltip.</span>
                        </ToolTip>
                </Overlay>
        );

Transition (includes my current workaround):

class TransitionTooltip extends React.Component {
    static propTypes = {};

    static defaultProps = {
        in: false,
        timeout: 250,
        unmountOnExit: false,
        transitionAppear: false
    };

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        const classlist = this.props.children.props.container.classList;

        return (
            // TODO: The entry and leave animations do not work with `enteredClassName`. This is a workaround:
            <Transition
                {...this.props}
                className="trs-tooltip"
                enteredClassName="trs-tooltip__entered"
                enteringClassName="trs-tooltip__entered"
                onEntering={ () => { classlist.add('tooltip-root__is-visible'); } }
                onExiting={ () => { classlist.remove('tooltip-root__is-visible'); } }>
                {this.props.children}
            </Transition>
        );
    }
}

I have already a working example with Modal and Transition, but I can't seem to make it work with an Overlay.

Transition can fail if new props affect animation state

Ran into this writing some Tabs stuff. Essentially as you switch tabs you apply an 'active' class that sets the display to block this needs to happen before the in class is added to the element to start the animation.

As it stands transitions triggered from a prop change actually start happening before the new props are flushed to the DOM. ie triggered here: https://github.com/react-bootstrap/react-overlays/blob/master/src/Transition.js#L50-L63

my thought is that we need to move these calls to componentDidUpdate.

cc @taion

Missing git tag for v0.6.0

Affix component's affixStyle should override the child's style

I believe

return React.cloneElement(child, {
      className: classNames(affixClassName, className),
      style: {...positionStyle, ...affixStyle, ...style}
    });

should be

return React.cloneElement(child, {
      className: classNames(affixClassName, className),
      style: {...positionStyle, ...style, ...affixStyle}
    });

For example, if I have a navbar with a background color of white initially and I want the affixed color to change when I scroll down the page it doesn't happen because currently the default style overrides the affix style

react-overlays v0.4.4 is broken on npm

Steps to replicate:

$ cd /var/tmp
$ rm -fr node_modules                                                                                                                                                                                
$ npm install react-overlays                                                                                                                                                                          
npm http GET https://registry.npmjs.org/react-overlays
npm http 304 https://registry.npmjs.org/react-overlays
npm http GET https://registry.npmjs.org/classnames
npm http GET https://registry.npmjs.org/dom-helpers
npm http GET https://registry.npmjs.org/warning
npm http GET https://registry.npmjs.org/react-prop-types
npm http 304 https://registry.npmjs.org/dom-helpers
npm http 304 https://registry.npmjs.org/warning
npm http 304 https://registry.npmjs.org/react-prop-types
npm http 304 https://registry.npmjs.org/classnames
npm http GET https://registry.npmjs.org/envify
npm http 304 https://registry.npmjs.org/envify
npm http GET https://registry.npmjs.org/through
npm http GET https://registry.npmjs.org/jstransform
npm http 304 https://registry.npmjs.org/through
npm http 304 https://registry.npmjs.org/jstransform
npm http GET https://registry.npmjs.org/base62/0.1.1
npm http GET https://registry.npmjs.org/esprima-fb/13001.1001.0-dev-harmony-fb
npm http GET https://registry.npmjs.org/source-map/0.1.31
npm http 304 https://registry.npmjs.org/base62/0.1.1
npm http 304 https://registry.npmjs.org/source-map/0.1.31
npm http 304 https://registry.npmjs.org/esprima-fb/13001.1001.0-dev-harmony-fb
npm http GET https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/amdefine
npm http GET https://registry.npmjs.org/react
npm http 304 https://registry.npmjs.org/react
[email protected] node_modules/react
└── [email protected] ([email protected], [email protected])

[email protected] node_modules/react-overlays
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected] ([email protected])
$ ls node_modules/react-overlays                                                                                                                                                                      
CHANGELOG.md  LICENSE  node_modules  package.json  README.md

There's no lib directory in the package!

Works fine when forcing previous version: npm install [email protected].

Position for Tooltips offset

Trying to debug this and have hit a dead end. It seems like all my tooltips from react-bootstrap is offset by 5-10 pixels.

My only ideas is that flexbox might be introducing unreliable offset from the parent containers.

Any ideas how to debug this further?

Show transition is not being correctly displayed

So i have a component that returns this jsx:
<Transition
transitionAppear
unmountOnExit
in={this.props.visible}
timeout={this.props.timeout}
className={classNames(this.props.className, this.props.transitionName) }
enteringClassName="entering"
enteredClassName="entered"
exitingClassName="exiting"
>
<div>my dom</div>
</Transition>

I'd expect that i could then simply change the props.visible to make my dom show/hide using the transition of my choice. The transition is correctly displayed when hiding the component (setting props.visible to false) but when showing the component it does not show a transition.
It looks to me that it renders the entering class to fast after the render of the component and react makes both updates on the DOM at the same time, and that in turn will make the transition not work.

I've played a little bit with the source code and found out that if i change the Transition.prototype.componentDidUpdate method to delay the performEnter just a bit (5 milliseconds worked for me) then it all works fine. I've tested it both in firefox and chrome.
Is this a real issue or am i doing something wrong?

Thanks in advance,
Pedro Fonseca

PS: This is the change i made to the componentDidUpdate method:

Transition.prototype.componentDidUpdate = function componentDidUpdate() {
  if (this.props.unmountOnExit && this.state.status === EXITED) {
    // EXITED is always a transitional state to either ENTERING or UNMOUNTED
    // when using unmountOnExit.
    if (this.props['in']) {
      var that = this;
      setTimeout(function () { that.performEnter(that.props); }, 5);
    } else {
      this.setState({ status: UNMOUNTED });
    }
  }
};

npm run examples don't create example\static\ files

how I can run examples with hot reload of babel?

rootClose is triggered on right click in firefox

RootCloseWrapper.js tags click events in getSuppressRootClose. There is an inconsistency in firefox between events received by handlers registered via onClick react attribute and document.addEventListener:

  bindRootCloseHandlers() {
    const doc = ownerDocument(this);

    this._onDocumentClickListener =
      addEventListener(doc, 'click', this.handleDocumentClick);

    return (
      <div onClick={this._suppressRootCloseHandler}>

the onClick handler will not receive right clicks in firefox:
https://github.com/facebook/react/blob/c5f7c8dae179b621de5fc9fbc4113a0e3536bbfd/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js#L550

so _suppressRootCloseHandler will not be called and therefore every right-click will result in closing the overlay.

Add OverlayTrigger to react-overlays?

It's not bootstrap-specific and very convenient, any reason it didn't get included? I could send a PR if there's no blocker.

Force reposition

I have a case in which the content of my overlay changes over time but there is no good way to get overlay to rerender without just toggling the show prop. Ideally, the overlay should reposition when any children change.

rootClose using React-Tap-Event-Plugin

When using react-tap-event-plugin and rootClose={true} the overlay opens and closes immediately. I've spent most of the day in my Chrome debugger but I can't figure out why it works as expected when my target uses onClick and it closes immediately when my target uses onTouchTap.

Here's what my component's render() function is returning:

<button
  className={classnames("btn",{"btn-primary": this.state.open})}
  onTouchTap={this._toggleOpen}
  ref="target"
>
  Open Overlay
  <Overlay
    show={this.state.open}
    onHide={() => this.setState({ open: false })}
    rootClose={true}
    placement={this.props.placement}
    target={() => ReactDOM.findDOMNode(this.refs.target)}
  >
    /* Some Overlay content... */
  </Overlay>
</button>

Honestly I'm not sure if this is an issue with react-overlays or not. I did see an old issue in react-bootstrap that indicated the React-Tap-Event-Plugin should work so I thought I'd start here.

As a workaround I'm just using onClick for my Overlay triggers but as you know it has a very sluggish feel on mobile devices, especially since the rest of the app is using onTouchTap.

Any ideas? Thanks!

Responsive affix

Hello,

I am trying to create a responsive affix with react-overlays. The idea is to have a sidebar that is shown on the left side of the screen on large displays, but that it displays on top of the screen when on small displays. That sidebar will at the same time use an AutoAffix to follow the user's scroll on large displays.

Using plain bootstrap, I could achieve that with some CSS:

@media (max-width: @screen-md-min) {
  #sidebar .affix {
    position: relative;
  }
}
@media (min-width: @screen-md-min) {
  #sidebar .affix {
    top: 45px;
    z-index: 1000;
    position: fixed;
  }
}

I could do the same using react-overlays by setting an affixClassName, but the in-line styles applied by the Affix component override the styling from the CSS. I would really like to avoid having to check the window width and assign in-line styles by hand.

In case I am missing something, have you got any ideas on how to achieve this? If not, would you consider changing the way Affix sets the positioning to allow this use case? I could work on the changes myself if necessary.

Here are the component using the sidebar, and the sidebar, in case you want to take a look:
https://github.com/Graylog2/graylog2-server/blob/ecfeee91aa1ba1226c64513f7daff79d1c904198/graylog2-web-interface/src/components/search/SearchResult.jsx#L178
https://github.com/Graylog2/graylog2-server/blob/0af59765252f835bd9753add850fa63fca91083d/graylog2-web-interface/src/components/search/SearchSidebar.jsx#L157

Thank you in advance!

Expose public API to allow overflow when Modal is open

Currently the style object has a hard coded overflow value of 'hidden'.

https://github.com/react-bootstrap/react-overlays/blob/master/src/ModalManager.js#L68

We have a use case where our UX team would like the user to be able to scroll the content behind the modal. We are not explicitly passing in a container, so it's defaulting to the body, and we'd like to avoid just styling the body element directly.

Would you guys accept a PR that implements an allowScroll prop? Or, if you want to generalize this, a containerStyle prop that is spread on the default style object?

Dom-helper container width should consider scrollbar

Hi, it seems like dom-helper is using window.innerWidth to get container width. This causes an incorrect offset computation in Position when the scrollbar is active. Are there any workarounds for it?

Transition and Overlay

Hi,

I'm trying to animate the Popover that vary according to placement. However, transition seems to be fixed to one transition class and i would need to create 1 Transition for each placement. Is there a better way to do it?

Thanks!

Export as an UMD library for bower

Hi!

Exporting react-bootstrap as an UMD lib on bower is such a good thing for people not using last generation tolling tools. I took the liberty to create react-overlays-bower and publish it on bower.

Tell me if you want the ownership of the repo and integrate automatically new versions in your release process.

Best,
David

How to use the transition prop in Modal?

I have the following code:

import React from "react";
import { Transition, Modal } from "react-overlays";

class DocumentModal extends React.Component {
    static propTypes = {
        show: React.PropTypes.bool
    }

    static defaultProps = {
        show: false
    }

    renderModal() {
        return (
            <div className="document-viewer">
             ....
            </div>
        );
    }

    render() {
        let { show } = this.props;

        let transition = <Transition in={show} timeout={150} className='fade' enteredClassName='in' enteringClassName='in' />

        let modal = (
            <Modal
                show={show}
                backdropClassName="document-viewer-backdrop"
                className="document-viewer"
                transition={transition}
            >
                {this.renderModal()}
            </Modal>
        );

        return modal;
    }
}

export default DocumentModal;

but returned the following error:

Warning: Failed propType: Invalid prop 'transition' of value '[object Object]' supplied to 'Modal'. Expected an Element `type`, not an actual Element Check the render method of `DocumentModal`.

Referenced component after one Portal?

Hi, I have an issue with Portal, in some cases the container parameter used by the Portal component is one function with a reference which may be undefined. It's undefined if the referenced component is declared after a Portal.

You can see here the problem:
https://github.com/julien-f/issue-react-overlays-portal/blob/master/src/index.js

To build this example, clone the repo and use npm install && npm run build.
See the results in src/index.html.

I fixed the problem with this code:

componentDidMount () {
  this.forceUpdate()
}

But it's not a proper solution I think. Any ideas to fix this? Thx.

react-dom peer dependency

With React.js v15, following warning is emitted:

npm ERR! peer dep missing: react-dom@^0.14.0, required by [email protected]

To fix this, react-dom entry in peerDependencies

"react-dom": "^0.14.0"

should be changed to:

"react-dom": ">=0.14.0"

Documenting Initial API changes

I've had to change a few of the api's (mostly in Modal) to make some of them work in a more generic setting. Ultimately any path forward migrating RB proper to this, will need to at least be aware of these changes in order to adjust the inevitable wrappers we need to write there.

I'd also definitely love feedback on these decision.

modal

• dialogTransitionTimeout and backdropTransitionTimeout props added instead of the static constants
• animation renamed to transition and only accepts a Transition component (false by default)
• onBackdropClick, 'onEscapeKeyUp` added as a hooks (This was more added for another of my projects)
• backdropStyle and backdropClassName were added instead of BootstrapMixin
• similarly containerClassName was added instead o just adding modal-open
• this styles the container node directly with overflow: hidden this seemed preferable then making the user provide a class or shipping css with it, since this is actually a big feature of the Modal
• Modal DOM layout always has a wrapping div (instead of just when there is a backdrop)
• No padding of the modal dialog when open (since that is a bootstrap specific component)

Position

• container also accepts a function
• empty arrowOffsets are now undefined instead of null, lets them work with es6 default values
• not done but thinking about it rename the injected arrow props, to something more descriptive and generic?

Portal

• container also accepts a function

Overlay

• animation renamed to transition and only accepts a Transition component (false by default)

`Uncaught TypeError: node.removeAttribute is not a function` with multiple modals

Example (adapted from official react-overlay modal example, with two modals at same level):
https://gist.github.com/jesenko/e453679c1f1579bd5127

On close, error is thrown at node.removeAttribute('aria-hidden'); in react-overlays/lib/utils/manageAriaHidden.js

React 15 support

More placement types for Position

Would it be possible to add more placement types for the Position component? It works great, but I can only position in one dimension, the other gets centered (e.g. placement=bottom means essentially bottom center).

Ideally, the Position component would have a similar API to that of jQuery UI Position - the user says what point of the element should be positioned to what point of the target. Is that realistic in the context of the Position component? .

Name?

react-overlays is available on npm, but not sure its a good name; just the first one that came to mind. There is non-overlay related stuff here, like RootClose and Transition as well

Modal autoFocus does not refocus on last focused element when Modal is closed

I opened an issue previously here: react-bootstrap/react-bootstrap#1851

In short, the element triggering the modal is not being refocused when the modal is closed. It appears that what is happening is that componentWillUpdate is called twice, and in turn, checkForFocus is called twice. So the modal is opened, checkForFocus is called, this.lastFocus is set to the triggering element (good), checkForFocus is called again, and this.lastFocus is set to the modal (assuming that autoFocus is set to true). I don't know why componentWillUpdate is being called twice, but I double checked that my own component is being rendered only once. This issue also affects the modals in the react-bootstrap doc., so I don't think my own code is causing the issue.

A simple fix appears to be to check that both nextProps.show is true (which is the current check) and that this.props.show is false within componentWillUpdate. This prevents the call to checkForFocus occurring when it doesn't need to.

I'll submit a pull request in a few, in the mean time I'm curious to know if I'm just way off track here :)

onmousedown vs onclick?

Hello!

My main application is performing some actions on mousedown (like dragging).

The background overlay here only triggers onClick, this results in an effect where the overlays don't disappear when the user begins to interact with the application.

Would you be open to a PR which moves the background handlers onto onMousedown ?

Portal causes controlled input cursor position to jump to the last character

Adding an input inside a portal that has a ReactLink back to the top level component (above the portal) causes the cursor to jump to the last character after ever keystroke.

I think this is happening because Portal render's it's children in a separate React.render call.

I couldn't find any docs on ReactUpdate.asap() which is used in the ReactDOMInput component to control updating the field but it seems like it's only waiting for batch updates from the components inside the current React.render call.

Portal: Warning: owner-based and parent-based contexts differ

Just a heads up as everything seems to work as expected. I get the following warning

Warning: owner-based and parent-based contexts differ (values: `[object Object]` vs `undefined`) for key (store) while mounting Connect(MyOriginalComponent) (see: http://fb.me/react-context-by-parent)

when I mount a component connected to a Redux store using connect to a Portal (in my case using the Overlay).

I'm using React 0.13.x.

Enforce focus not working

I've traced through this in the debugger - when I have focus set to the last element in the modal and I press TAB, the 'enforceFocus' callback is not getting called, and so focus trapping is not happening.

The way I've handled this in past projects is to create invisible focusable elements at the beginning and the end of the modal, which when focused reset the focus to the last and first field respectively.

is there any placement option like 'auto' in react-overlays ? jquery-bootstrap have this options

onHide on Overlay used in examples but having no functionality

If I understand correctly passing onHide function to Overlay is pointless, because Overlay nor children can takes advantage of it unless rootClose is used along with it.

Which is confusing since its used in examples. Have you considered passing onHide to children to it can be called from there?

How to get more control over backdrop (I want to put an x mark on it)

Hey,

So I want to create a modal that has an x mark in the corner, and I'm having trouble.

So I have a reusable component encapsulating the react-overlay instance, and the same way that I'm passing a function to execute on hide, I'd like to be able to pass a function to the component encapsulating react-overlay that I can just execute.

var RespModal = React.createClass({
    <Modal
        show={open}
        onHide={onClose}
        className={overlayClasses}
        containerPadding={0}
        containerClassName={containerClass}
        backdrop={false}>
        <div className={modalClasses}>
            <div className="modal-close" onClick={this.props.another}>X</div>
            {this.props.children}
            {loader}
        </div>
    </Modal>
});

<RespModal
    show={open}
    onHide={onClose}
    another={onClose}>
    content here
</RespModal>

I don't know how much I need to flesh this out, but basically I needed more control over the backdrop so I put my own backdrop inside the modal, and that's been working fairly well. I either need a way to get more control over the backdrop, or I need to figure out how to give the encapsulating component itself the ability to take the close function and execute it. Any ideas? If I need to flesh out any ideas let me know.

accessibility

There are a few issues here, that are not trivial to fix, to make the modal actually useful to a SR and not just what upstream bootstrap shows as accessible.

This is really made complicated by both stacking, and multiple containers.

1. when a modal is open aria-hidden should be applied to the rest of the document content, so a SR can't shift virtual focus to it (which is separate from actual focus which is already handled). Essentially we need to create a virtual backdrop for the SR, so that it can't interact with anything else. This only actually makes sense tho when the container is the document body, or some other top level root. If the container is some deeper component, adding aria-hidden to it only hides some of the content.
2. On top of this, any additional modals with backdrops that open should cause existing modals to be aria-hidden.

This gets sort of messy pretty quick. I'd like to handle it if we can, since doing this correctly is not super easy for a consumer, but I don't want to add a ton of overhead either.

Updating the position on window resize.

It will be better to adjust the position based on the based on window resize event.

Overlay position that's attached to an input is incorrect

I have a Popover which is wrapped by an Overlay element and it has a text input element as the target, and that Popover is placed top left-ish corner of the page, which is not the correct place. I think the problem is not within react-bootstrap, so I opened the issue here.

I checked the arguments provided to calcOverlayPosition code for possible bugs but it looks like the target is a direct child of the container, which seems okay to me. Any idea how to solve it?

Update the Latest build in npm

Can you update the latest changes into npm i really need the dynamic positioning changes?

or

can it be the processed lib forlder in repo itself? thereby not relying on npm always.

Allow react 0.14.0-beta1 as peer dependency

Does anything break with react 0.14.0-beta1?

Alternatively Position with 'right' and 'bottom'

The <Position> component applies 'left' and 'top' positioning styles. It would be useful to support positioning with 'right' or 'bottom'.

v0.4.0 is missing lib/ and built code

Probably a small mistake, but you pushed v0.4.0 and when you install it it doesn't include the built lib.

This is what you get when you install it:

React 0.14.1?

peer invalid: react-dom@^0.14.0, required by [email protected]

AutoAffix not overlay over input and other elements

I'm using your react-bootstrap library with this one and I noticed when AutoAffix is activated some of the elements doesn't go down the AutoAffix element but instead stay over.

As you can see this especially happened with Glyphicon, Input, and Paginationelements

aria-hidden gets removed on elements that previously already had it

When I'm opening a modal, all elements get aria-hidden="true". Unfortunately, there are elements that have an existing aria-hidden="true" tag.
When the modal is closed, all elements lose the tag, including those that had it previously.

Include RootCloseWrapper as part of public API

RootCloseWrapper is small but definitely useful on its own. What are your thoughts about adding it as part of the public API?

Unknown props when using Overlay

Using React 15.2.0 and react-overlays 0.6.4 results in the following Warning in the console while using the Overlay component.

warning.js?8a56:44 Warning: Unknown props `placement`, `arrowOffsetLeft`, `arrowOffsetTop`, `positionLeft`, `positionTop` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Select)
    in Position (created by Overlay)
    in div (created by RootCloseWrapper)
    in RootCloseWrapper (created by Overlay)

Some code that shows how i use the Overlay component so that it is clear that my code isn't sending down wierd props.

        <Overlay placement="bottom" show={open} rootClose container={this} onHide={this.handleHide} target={this.handleTarget}>
          <div className={styles.menu}>
            {children.map((child, index) => {
              return React.cloneElement(child, {
                active: selected == index,
                onClick: this.handleSelect,
              })
            })}
          </div>
        </Overlay>

is there any placement option like 'auto' in react-overlays ?

RT

AutoAffix - layout jumps up once affixed

Example code:

class AffixExample extends React.Component {
  render() {
    return (
      <div className='affix-example'>
        <AutoAffix viewportOffsetTop={30} container={this}>
          <div className='panel panel-default'>
            <div className='panel-body'>
              I aaaam an affixed element
            </div>
          </div>
        </AutoAffix>
        <p>Other content asdf</p>
      </div>
    );
  }
}

React.render(<AffixExample/>, mountNode);

Initial layout:

Scrolled one pixel down to trigger the affix (opacity added via devtools):

Once position: fixed is applied, I believe there needs to be some kind of placeholder inserted with an equal height in order to keep sibling content from jumping up.

As far as a solution, this worked for me, but it's kind of a mess. Is there a better approach or would you take a PR with something like this?

import * as React from "react";
import AutoAffix from "react-overlays/lib/AutoAffix";

export default class AffixWrapper extends React.Component {
    componentWillMount() {
        this.setState({ affixed: false });
    }

    render() {
        return (
            <div>
                <AutoAffix { ...this.props }
                    onAffix={ () => this.setState({ affixed: true }) }
                    onAffixTop={ () => this.setState({ affixed: false }) } >

                    <div ref={ c => this.content = c }>
                        { this.props.children }
                    </div>

                </AutoAffix>

                { this.state.affixed &&
                    <div style={ { width: "100%", height: this.contentHeight } } />
                }
            </div>
        );
    }

    componentDidMount() {
        this.updateHeight();
    }

    componentDidUpdate() {
        this.updateHeight();
    }

    updateHeight() {
        this.contentHeight = Math.max(
            this.content.scrollHeight,
            this.content.offsetHeight,
            this.content.clientHeight
        );
    }
}

Babel 6?

Any plan to upgrade to babel 6 for this repo? I can help with that if that is a valid plan. Thanks!

ReactDom FindDOMNode undefined

i get this error when i try to use overlays

_reactdom2.default.findDOMNode is undefined.

Can i use the latest version 0.6.0 on React 0.13.3?
even after going back to older version 0.3.0, i get the same error

<Overlay show={this.state.show} onHide={() => this.setState({ show: false })} placement={this.state.placement} container={this} target={ props => findDOMNode(this.refs.target)} > <ToolTip> I'm placed to the: <strong>{this.state.placement}</strong> </ToolTip> </Overlay>