Watery-UI

Watery UI is a UI component library that helps you deploy React applications faster and more efficiently. Currently, only the modal has been developed, and we plan to gradually add other features/components.

Table of contents

• Installation
• Modal

Installation

To install, you can use npm or yarn:

$ npm install --save watery-ui
$ yarn add watery-ui

Modal

You can make modals and use them in the style you want.

Modals can operate synchronously/asynchronously,

You can also pass the value to the place called within the modal.

1. First, add a provider.

import { ModalProvider } from 'watery-ui';

<ModalProvider>
  <App />
</ModalProvider>

2. Get openModal from useModal. And use openModal.

import { useModal } from 'watery-ui';

function ModalSample() {
  const { openModal } = useModal();

  const handleOpenModalBtnClick = () => {
    openModal({
      Modal: ({ onConfirm, onClose }) => {
        return (
          <div>
            <h2>MODAL</h2>
            <button onClick={() => onConfirm()}>CONFIRM</button>
            <button onClick={() => onClose()}>CLOSE</button>
          </div>
        )
      }
    })
  }

  return (
    <button onClick={handleOpenModalBtnClick}>OPEN MODAL</button>
  )
}

openModal(params)

The return value of openModal is in the form of Promise.

The return value is { isConfirm, data }.

• isConfirm: If onConfirm is operated, it has a true value, and if it is onClose, it has a false value.
• data: If a value is sent to the first factor of onConfirm or onClose, the value is returned by putting it in the data.

Examples

  const handleModalOpenBtnClick = async () => {
    const result = await openModal({
      Modal: ({ onConfirm, onClose }) => (
        <div>
          <h2>MODAL</h2>
          <button onClick={() => onConfirm('Confirm')}>CONFIRM MODAL</button>
          <button onClick={() => onClose('Close')}>CLOSE MODAL</button>
        </div>
      ),
      onOk: () => {
        console.log('onOk');
      },
      onCancel: () => {
        console.log('onCancel');
      },
      overlayClose: true,
    });

    console.log(result);

    // When you click CONFIRM MODAL
    // output: onOk
    // output: { isConfirm: true, data: 'Confirm' }

    // When you click CLOSE MODAL
    // output: onCancel
    // output: { isConfirm: false, data: 'Close' }
  };