Modal context provider
Internal use only. These components are available only within Atlassian.Application setup
Place ModalContextProvider at the top of your application, above every modal entry point trigger.
It renders the modals requested by descendant triggers and manages opening and closing them. Without
this provider, modal triggers cannot open a modal.
This example places the provider around Application. Select Open modal to open a modal from a
trigger inside the application, then close it to return to the trigger.
import React from 'react';
import { ModalButtonTrigger } from '@atlassian/entry-points/modal-button-trigger';
import { ModalContextProvider } from '@atlassian/entry-points/modal-context-provider';
import { modalEntryPoint } from '../fixtures/modal-entry-point';
import { RelayWrapper } from '../utils/wrapper';
function Application(): React.JSX.Element {
return (
<ModalButtonTrigger
entryPoint={modalEntryPoint}
modalTitle="Example Modal"
loadingText="Loading example modal"
>
Open modal
</ModalButtonTrigger>
);
}
export default function ModalContextProviderExample(): React.JSX.Element {
return (
<RelayWrapper>
<ModalContextProvider>
<Application />
</ModalContextProvider>
</RelayWrapper>
);
}Each standalone documentation example includes its own provider so it can run independently. In your application, share one provider at the application root instead of adding a provider around every trigger.
The example's RelayWrapper supplies a mock Relay environment. Use your application's existing
Relay environment in production.