React Hooks Use Modal: Dễ dàng Mở Cửa sổ Modal trong React bằng React Hooks

useModal

Đây là một react hook có thể dễ dàng mở cửa sổ modal.

Sử dụng

import React, { useState, useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import { useModal } from 'react-hooks-use-modal';

const App = () => {
  const [Modal, open, close, isOpen] = useModal('root', {
    preventScroll: true,
    focusTrapOptions: {
      clickOutsideDeactivates: false,
    },
  });
  return (
    <div>
      <p>Modal is Open? {isOpen ? 'Yes' : 'No'}</p>
      <button onClick={open}>OPEN</button>
      <Modal>
        <div>
          <h1>Title</h1>
          <p>This is a customizable modal.</p>
          <button onClick={close}>CLOSE</button>
        </div>
      </Modal>
    </div>
  );
};
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Cú pháp

[ModalComponent, openFunc, closeFunc, isOpenBool] = useModal(domNode?, { initialValue?, preventScroll?, focusTrapOptions?, components? })

ModalComponent Loại: React.FC<{ title?: React.ReactNode; description?: React.ReactNode, children?: React.ReactNode, additionalProps?: Record }> Thành phần modal hiển thị các thành phần con ở giữa màn hình. Nếu bạn chỉ định title và description, additionalProps, bạn phải triển khai các thành phần tùy chỉnh với tùy chọn components và hiển thị trong chúng. Xem VÍ DỤ dưới đây để biết chi tiết. https://github.com/microcmsio/react-hooks-use-modal/blob/master/examples/src/js/components-option/index.tsx

openFunc Một hàm để mở modal.

closeFunc Một hàm để đóng modal.

isOpenBool Một boolean để biết trạng thái modal có đang mở hay không.

domNode Tùy chọn. Giá trị mặc định là ‘root’. Thành phần modal sử dụng React-Portal. Bạn có thể chỉ định nút domNode đầu ra với đối số này.

initialValue Tùy chọn. Giá trị mặc định là false. Điều này hữu ích khi bạn muốn gắn modal trong tình trạng mở.

preventScroll Tùy chọn để ngăn cuộn khi modal đang mở. Giá trị mặc định là false.

focusTrapOptions Ghi đè các tùy chọn focus-trap được sử dụng bên trong. Ví dụ, để ngăn modal đóng khi một phần tử không phải modal được nhấp chuột, làm như sau

useModal('root', {
  focusTrapOptions: {
    clickOutsideDeactivates: false,
  },
});

components Tùy chọn. Đây là một tùy chọn để tùy chỉnh ModalWrapper được trả về bởi useModal. Sử dụng như sau

useModal('root', {
  components: {
    Modal: ({ title, description, children }) => {
      return (
        <div
          style={{
            padding: '60px 100px',
            backgroundColor: '#fff',
            borderRadius: '10px',
          }}
        >
          {title && <h1>{title}</h1>}
          {description && <p>{description}</p>}
          {children}
        </div>
      );
    },
    Overlay: () => {
      return (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
          }}
        />
      );
    },
    Wrapper: ({ children }) => {
      return (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            zIndex: 1000,
          }}
        >
          {children}
        </div>
      );
    },
  },
});

Kết hợp với ModalProvider (miêu tả ở dưới), bạn có thể chỉ định kiểu mặc định cho tất cả useModal trong dự án.

Thiết lập Toàn cầu

Thành phần ModalProvider cho phép bạn áp dụng cấu hình mặc định chung cho tất cả các useModal.

<ModalProvider {...options}>
  <Component />
</ModalProvider>

Ví dụ sau đây thiết lập tất cả các kết nối useModal để mặc định không cuộn bên ngoài modal.

const Component1 = () => {
  const [Modal] = useModal('root');
  return (
    <Modal>
      <h2>Common</h2>
    </Modal>
  );
};
const Component2 = () => {
  const [Modal] = useModal('root', { preventScroll: false }); // override
  return (
    <Modal>
      <h2>Override options</h2>
    </Modal>
  );
};

const App = () => {
  return (
    <ModalProvider preventScroll>
      <Component1 />
      <Component2 />
    </ModalProvider>
  );
};

Demo

https://microcmsio.github.io/react-hooks-use-modal/

Hướng dẫn phát triển

Thiết lập

$ yarn

Xây dựng src

$ yarn build

Theo dõi src

$ yarn watch

Khởi chạy bản demo

$ yarn start:demo

Sau đó truy cập tại http://localhost:3001/react-hooks-use-modal

Chi tiết tải về:

Tác giả: microcmsio
Nguồn: https://github.com/microcmsio/react-hooks-use-modal