Skip to main content

Modal

The Modal context is used to set modal content across the FreeSewing web UI.

TIP

As with all React context, the provider should wrap the content in which you want to use the context.

When using one of the high-level wrappers like DocusaurusDoc or DocusaurusPage the context provider is already loaded.

Examples​


The ModalWrapper documentation has more examples.

Components​

The Modal context provides the following components:

ModalContext​

This is the context itself to be passed to React.useContext().

import { ModalContext } from '@freesewing/react/context/Modal'

const MyComponent = () => {
  const {
    clearModal,
    modalContent,
    setModal,
  } = useContext(ModalContext)

  // ...
}

The returned object holds the following:

context.clearModal​

Call this method to clear the modal content.

context.modalContent​

This holds the current modal content.

TIP

When using one of the high-level wrappers like DocusaurusDoc or DocusaurusPage the modal content will automatically be displayed. If not, you need to render it yourself using this value.

context.setModal​

Call this method to set the modal content. The only parameter is the content to set.

ModalContextProvider​

This is the context provider, it does not take any props apart from props.children.