design-system-react/

Modal

This is a simple modal that will connect through React Portal.

Requirement

Ensure index.html has a <div id="modal"></div> element.

Basic Modal

<BasicModal
  title="Example Modal"
  body="Here is the body text"
  handleCancel={removeModal}
  handleConfirmation={removeModal}
/>
copy

Spotlight usage

Example taken from a parent component that was consuming the spotlight:

const Component = () => {
  // @example code of how it was used
  const [showSpotlight, setShowSpotlight] = useState<boolean>(false);
  const revealSpotlight = () => setShowSpotlight(true);
  const dismissSpotlight = () => setShowSpotlight(false);

  const keyFn = useCallback(
    (event) => {
      // base case - do nothing if input selected
      const inputs = ['input', 'select', 'button', 'textarea'];
      if (
        document.activeElement &&
        inputs.indexOf(document.activeElement.tagName.toLowerCase()) !== -1
      ) {
        return;
      }

      if (event.keyCode === 190) {
        //Do whatever when fullstop is pressed
        if (!showSpotlight) {
          revealSpotlight();
        }
      }

      if (event.keyCode === 27) {
        //Do whatever when esc is pressed
        if (showSpotlight) {
          dismissSpotlight();
        }
      }
    },
    [showSpotlight],
  );

  useEffect(() => {
    document.addEventListener('keydown', keyFn, false);

    return () => {
      document.removeEventListener('keydown', keyFn, false);
    };
  }, [keyFn]);

  return (
    <>
      {showSpotlight && <Spotlight handleCancel={() => dismissSpotlight()} />}
    </>
  );
};
copy