Naboo's Podracing Misadventure

    @zendeskgarden/container-modal
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    @zendeskgarden/container-modal npm version

    This package includes containers relating to modals in the Garden Design System.

    Installation

    npm install @zendeskgarden/container-modal

    Usage

    This container implements the dialog design pattern and can be used to build a modal component. Check out storybook for live examples.

    useModal

    import { useRef } from 'react';
    import { useModal } from '@zendeskgarden/container-modal';
    
    const Modal = () => {
      const [isModalVisible, setModalVisibility] = useState(false);
      const modalRef = useRef(null);
      const { getBackdropProps, getModalProps, getTitleProps, getContentProps, getCloseProps } =
        useModal({ onClose: () => setModalVisibility(false), modalRef });
    
      return (
        <>
          <button onClick={() => setModalVisibility(!isModalVisible)}>Open Modal</button>
          {isModalVisible && (
            <div
              {...getBackdropProps({
                style: {
                  background: 'rgba(0,0,0,0.2)',
                  position: 'fixed',
                  top: '0',
                  right: '0',
                  bottom: '0',
                  left: '0',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }
              })}
            >
              <div
                {...getModalProps({
                  ref: modalRef,
                  style: {
                    padding: '20px',
                    background: '#fff',
                    minWidth: '500px',
                    minHeight: '400px',
                    position: 'relative'
                  }
                })}
              >
                <h1 {...getTitleProps()}>Example header</h1>
                <section {...getContentProps()}>
                  <p>Modal contents</p>
                  <input placeholder="focusable content" />
                  <button>Submit</button>
                </section>
                <button
                  {...getCloseProps({
                    'aria-label': 'Schließen Sie Modal',
                    style: { position: 'absolute', top: '20px', right: '20px', cursor: 'pointer' }
                  })}
                >
                  X
                </button>
              </div>
            </div>
          )}
        </>
      );
    };

    ModalContainer

    import { useRef } from 'react';
    import { ModalContainer } from '@zendeskgarden/container-modal';
    
    const Modal = () => {
      const [isModalVisible, setModalVisibility] = useState(false);
      const modalRef = useRef(null);
    
      return (
        <>
          <button onClick={() => setModalVisibility(!isModalVisible)}>Open Modal</button>
          <ModalContainer modalRef={modalRef} onClose={() => setModalVisibility(false)}>
            {({ getBackdropProps, getModalProps, getTitleProps, getContentProps, getCloseProps }) => {
              return (
                isModalVisible && (
                  <div
                    {...getBackdropProps({
                      style: {
                        background: 'rgba(0,0,0,0.2)',
                        position: 'fixed',
                        top: '0',
                        right: '0',
                        bottom: '0',
                        left: '0',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }
                    })}
                  >
                    <div
                      {...getModalProps({
                        ref: modalRef,
                        style: {
                          padding: '20px',
                          background: '#fff',
                          minWidth: '500px',
                          minHeight: '400px',
                          position: 'relative'
                        }
                      })}
                    >
                      <h1 {...getTitleProps()}>Example header</h1>
                      <section {...getContentProps()}>
                        <p>Modal contents</p>
                        <input placeholder="focusable content" />
                        <button>Submit</button>
                      </section>
                      <button
                        {...getCloseProps({
                          'aria-label': 'Schließen Sie Modal',
                          style: {
                            position: 'absolute',
                            top: '20px',
                            right: '20px',
                            cursor: 'pointer'
                          }
                        })}
                      >
                        X
                      </button>
                    </div>
                  </div>
                )
              );
            }}
          </ModalContainer>
        </>
      );
    };

    Install

    npm i @zendeskgarden/container-modal

    DownloadsWeekly Downloads

    4,537

    Version

    1.0.0

    License

    Apache-2.0

    Unpacked Size

    43.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • zendesk-garden