Utilities for creating robust overlay components

  • By react-bootstrap
  • Last update: Nov 25, 2022
  • Comments: 16

react-overlays

CI status Deploy docs status Codecov Netlify Status

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.

Github

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

Comments(16)

  • 1

    Modal does not work with React 16

    Probably the same issue as https://github.com/facebook/react/issues/9808. When the Modal is shown and tries to get focus (via componentDidUpdate -> onShow - focus), setModalNode will not have been called and getDialogElement will return undefined.

  • 2

    Use Popper for position calculations

    There's a functional change here in same-axis positioning when the positioned element is about to escape. Otherwise I think everything mostly works the same. There's a debounce on the initial update, but that's not really noticeable.

    I changed the API a bit to make it maybe cleaner. Plus now I explicitly hide the positioned element when we don't have a position for it.

    We're not really exposing all that Popper is offering, but I'm okay with that. This closes a lot of the positioning issues on our end.

    Closes #52 Closes #135 Closes #175 Closes #176 Closes #178

  • 3

    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>
  • 4

    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`.
  • 5

    Uncaught TypeError: (0 , _uncontrollable.default) is not a function

    issue: Uncaught TypeError: (0 , _uncontrollable.default) is not a function

    packages: react-dom: 16.8.6 react:16.8.6 react-overlays:1.2.0

    still getting this error:

    browser source: Uncaught TypeError: (0 , _uncontrollable.default) is not a function

    var UncontrolledDropdown = (0, _uncontrollable.default)(Dropdown, { show: 'onToggle' });

    browsewr console output: Uncaught TypeError: (0 , _uncontrollable.default) is not a function at Object../node_modules/react-bootstrap/node_modules/react-overlays/Dropdown.js (Dropdown.js:305) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object../node_modules/react-bootstrap/es/Dropdown.js (app.5aa110fbdd7b2189a480.js:105655) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object../node_modules/react-bootstrap/es/index.js (app.5aa110fbdd7b2189a480.js:110277) at webpack_require (bootstrap 5aa110fbdd7b2189a480:680) at fn (bootstrap 5aa110fbdd7b2189a480:105) at Object. (TooltipWrapper.jsx:2) client?843a:38 [WDS] Hot Module Replacement enabled.

    we do not directly use the uncontrolled component, it is being used by react-overlays in the Dropdown component.

    anything i may be missing? and do i need to open a new issue for the same problem?

    Originally posted by @MarkEmerson in https://github.com/react-bootstrap/react-overlays/issues/300#issuecomment-515867172

  • 6

    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? .

  • 7

    Fix transition in behaviour for unmountOnExit

    It seems that if you're using the unmountOnExit option, then the Transition component both mounts your child component and applies the enteringClassName in the same Javascript tick, this causes the browser to not trigger the animation (and instead the enteringClassName attributes are immediately applied).

    By forcing a wait until the next Javascript tick in this case animation appears to reliable happen.

  • 8

    DO NOT MERGE: Add OverlayTrigger

    I needed it, so I ripped it out from react-bootstrap. This needs to get cleaned up, but I figure having a PR doesn't hurt.

    The examples server wasn't working for some reason, so I converted the two loaders to ES5 and used webpack-dev-server from the CLI.

    Using npm v3.3.0, I managed to install all dependencies and generate a new example bundle. I was getting errors and updating all outdated dependencies somehow solved it. Re-added the jquense/component-playground package to get stuff working again.

    In OverlayTrigger I removed the reference to react-bootstrap from the warning message. In OverlayTriggerSpec I removed the overlay types, since there's no tooltips / popovers here. Probably need to add a new test-case for that.

    Reduced the Transition timeout from 5 seconds to 1 second, because otherwise the test would time out. Increased the wait-time for that test to 5 seconds as well.

    You can confirm that it works by checking out by branch, and running a file-server from the examples folder.

  • 9

    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: one

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

    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
        );
    }
}
  • 10

    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.

    screen shot 2016-05-09 at 4 48 29 pm

    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.

  • 11

    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?

  • 12

    chore(deps): bump express from 4.17.1 to 4.18.2

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 13

    chore(deps): bump express from 4.17.1 to 4.18.2 in /www

    Bumps express from 4.17.1 to 4.18.2.

    Release notes

    Sourced from express's releases.

    4.18.2

    4.18.1

    • Fix hanging on large stack of sync routes

    4.18.0

    ... (truncated)

    Changelog

    Sourced from express's changelog.

    4.18.2 / 2022-10-08

    4.18.1 / 2022-04-29

    • Fix hanging on large stack of sync routes

    4.18.0 / 2022-04-25

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 14

    chore(deps): bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 15

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2 in /www

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 16

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related