Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a way to pass a variable through showModal #31

Open
gajus opened this issue Jul 26, 2020 · 2 comments
Open

Add a way to pass a variable through showModal #31

gajus opened this issue Jul 26, 2020 · 2 comments

Comments

@gajus
Copy link
Contributor

gajus commented Jul 26, 2020

Related to #30

I need to pass variable to useModal constructor from invocation of showModal, which has access to the parent context.

@gajus
Copy link
Contributor Author

gajus commented Jul 26, 2020

As a very dirty workaround I've used:

// @see https://github.com/mpontus/react-modal-hook/issues/31
global.snackMeetingParticipantUid = snackMeetingParticipant?.uid;

const [showReportProblem, hideReportProblem] = useModal(() => {
  invariant(global.snackMeetingParticipantUid, 'Snack meeting participant is not available.');

  return <ReportProblem
    onClose={hideReportProblem}
    snackMeetingParticipantUid={global.snackMeetingParticipantUid}
  />;
});

@ThisNameWasTaken
Copy link

It looks like you can pass dependencies to the useModal hook like this:

useModal(
  () => <>...</>,
  [dependency1, dependency2, ...]
);

Here is something that worked for me:

const MyComponent = () => {
  const [foo, setFoo] = useState('foo');

  const [showModal, hideModal] = useModal(
    () => (
      <>
        <p>{foo}</p>
        <button
          onClick={() => {
            setFoo("bar");
          }}
        >
          Change foo to bar
        </button>
      </>
    ),
    [foo]
  );
  
  return <button onClick={showModal}>Show modal</button>;
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants