react-popper: re-position using scheduleUpdate

Question

I'm using React-popper to show a date picker element after clicking a button.

JSX

<Manager>
    <Reference>
        {({ ref }) => (
            <button ref={ref} onClick={this.onDateRangeBtnClick}>click to show</button>
        )}
    </Reference>
    {ReactDOM.createPortal(
        <Popper placement="auto-end" >
            {({ ref, style, placement, arrowProps, scheduleUpdate }) => (
                <div className={`dayPickerOverlay ${this.state.showDatePicker ? "" : "hidden"}`} ref={ref} style={style} data-placement={placement}>
                    <DateRangePicker />
                </div>
            )}
        </Popper>,
        document.querySelector('#root')
    )}
</Manager>

When onDateRangeBtnClick is called after the button was clicked, I want to re-position the Popper element by calling scheduleUpdate method, but I do not know how to approach this.

How can I expose that specific scheduleUpdate to be called within the onDateRangeBtnClick or alternatively how can I conditionally call a function (scheduleUpdate for this matter) within JSX itself?

Fez Vrasta · Accepted Answer · 2018-09-12T15:07:50.337

I would split the popper part into its own component and take advantage of the React lifecycle hooks.

Inside componentDidUpdate you can check if the open state changed, and trigger the scheduleUpdate accordingly.

// PopperElement.js
export default class PopperElement extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.open && this.props.open !== prevProps.open) {
      this.props.scheduleUpdate();
    }
  }

  render() {
    return (
      <div className={`dayPickerOverlay ${this.state.showDatePicker ? "" : "hidden"}`} ref={ref} style={style} data-placement={placement}>
        <DateRangePicker />
      </div>
    );
  }
}

// App.js
<Manager>
  <Reference>
    {({ ref }) => (
      <button ref={ref} onClick={this.onDateRangeBtnClick}>click to show</button>
    )}
  </Reference>
  {ReactDOM.createPortal(
    <Popper placement="auto-end">
      {({ ref, style, placement, arrowProps, scheduleUpdate }) => (
        <PopperElement open={this.state.open} scheduleUpdate={scheduleUpdate} />
      )}
    </Popper>,
    document.querySelector('#root')
  )}
</Manager>

If you prefer a more concise approach, I think I'd use react-powerplug this way:

import { Manager, Popper, Reference } from 'react-popper';
import { State } from 'react-powerplug';

const App = () => (
  <Manager>
    <Popper>
      {({ ref, style, scheduleUpdate }) => (
        <State initial={{ open: false }} onChange={scheduleUpdate}>
          {({ state, setState }) => (
            <Fragment>
              <Reference>
                {({ ref }) => (
                  <button
                    ref={ref}
                    onClick={() => setState({ open: true }})
                  >click to show</button>
                )}
              </Reference>
              {open && <YourContent ref={ref} style={style} />}
            </Fragment>
          )}
        </State>
      )}
    </State>
  </Manager>
);

I avoided to repeat the React.createPortal part for conciseness, it should be in place of YourContent.

Thank you very much sir! Another great example why React is horrible way to build apps. So much unnecessary files and code are needed simply to call a function on state change.. — vsync, Sep 12 '18 at 14:59
It appears your first example cannot work since `ref` cannot be passed to child component. [read more](https://stackoverflow.com/q/38864033/104380) — vsync, Sep 15 '18 at 15:34
You just have to give it a different name. Like `innerRef` or use the new forwardRef API of React — Fez Vrasta, Sep 15 '18 at 15:35
@FezVrasta: Your example depends on the Popper updating. Is there a way to call `scheduleUpdate` if the reference element changes but the Popper does not? I've run into a case where `componentDidUpdate` doesn't get called, so the positioning doesn't change. — ericgio, Jan 17 '19 at 19:10

react-popper: re-position using scheduleUpdate

JSX

1 Answers1