Skip to content

Instantly share code, notes, and snippets.

@balzss
Last active June 9, 2020 11:00
Show Gist options
  • Save balzss/5c660173236f088ee4576ab3e98b08c2 to your computer and use it in GitHub Desktop.
Save balzss/5c660173236f088ee4576ab3e98b08c2 to your computer and use it in GitHub Desktop.
about the container hooks in pal

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>
  );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment