about the container hooks in pal

hooks.md

About the useXYZContainer hooks

Certain components are almost always need to be exposed at a global level. Such components are the Modal, SidePanel or the ToastNotification. The goal of these container hooks is to make the usage of those components easier and less error prone.

Benefits

• can be used anywhere and the components are always going to be at the top of the component tree
• no accidental duplicates: always one or no instance is present

How to use them

The API is not finalized yet but will look something like this:

import React from 'react';
import { Modal } from 'carbon-components-react';
import { useModalContainer } from '../../Provider/context';

const MyModal = (props) => {
  return (
    <Modal {...props}>
      <h1>Modal</h1>
      <p>Lorem ipsum</p>
    </Modal>
  );
};

export default function ExampleComponent() {
  const [open, setOpen] = useState(false);
  const modalProps = {
    open,
    onRequestClose: () => setOpen(false),
    secondaryButtonText: 'Close',
  };
  
  useModalContainer(MyModal, modalProps);

  return (
    <div>
      <button onClick={() => setOpen(true)} type="button">
        Open Modal
      </button>
    </div>
  );
}