@eteg/react-modals v1.0.0

@garden/components

This package includes several varieties of modals within the Garden Design System.

Installation

npm install @garden/components

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-buttons @zendeskgarden/react-theming react-icons --save

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal } from '@garden/components';
import { useState } from 'react';

/**
 * Place a `ThemeProvider` at the root of your React application
 */

const modalButtons: PropsButtonModal[] = [
  {
    text: 'Loading',
    function: () => console.log('Loading'),
    isPrimary: true,
    isLoading: true
  },
  {
    text: 'Delete',
    function: () => console.log('Delete'),
    isPrimary: true,
    isDanger: true
  },
  {
    text: 'Confirm',
    function: () => console.log('Confirm'),
    isPrimary: true
  }
];

export function App() {
  const [buttonsModal, setButtonsModal] = useState < boolean > false;

  return (
    <ThemeProvider>
      <Button onClick={() => setButtonsModal(true)}>Open Buttons Modal</Button>
      <Modal
        modalClose={() => setButtonsModal(false)}
        isOpen={buttonsModal}
        title="Lorem ipsum dolor sit amet"
        buttons={modalButtons}
      >
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ullamcorper lacus.
          Nunc tempor aliquet quam id ullamcorper. Nunc a ex velit. Etiam commodo a eros eget
          posuere.
        </p>
      </Modal>
    </ThemeProvider>
  );
}

Modal Component

Extends HTMLAttributes

The Modal Component applies appropriate styles based on its usage and the props provided.

Modal Buttons

Extends ButtonHTMLAttributes

The Modal Buttons applies appropriate styles based on its usage and the props provided.