React Hook Layout: Một React Hook cho Quản lý Bố cục Biểu diễn

react-hook-layout

Demo page

Hook này là một biến thể của phương pháp, được mô tả trên trang tài liệu Composition vs Inheritance.

Bố cục hiện tại là một thành phần riêng biệt và có thể được áp dụng trên các trang khác nhau. Ngoài ra, việc chuyển đổi bố cục trong thời gian chạy rất dễ dàng.

Cài đặt

npm i react-hook-layout

Sử dụng

. Thành phần Bố cục trông như thế này:

import { useSlots } from "react-hook-layout";

export const MyLayout = () => {
  const { A, B } = useSlots("A", "B");

  return (
    <>
      <article>{A}</article>
      <footer>{B}</footer>
    
  );
};

. Thành phần Trang sử dụng bố cục:

import { defineSlots, useLayout } from "react-hook-layout";
import { MyLayout } from "./MyLayout";

const { A, B } = defineSlots("A", "B");

const MyPage = () => {
  const Layout = useLayout(MyLayout);

  return (
    <Layout>
      <A>My article</A>
      <B>Author by Me</B>
    </Layout>
  );
};

Trang sẽ được biểu diễn thành:

<article>My article</article>
<footer>Author by Me</footer>

Ví dụ

Kiểm tra ví dụ trên demo page

hoặc

Chạy storybook ở chế độ local:

git clone https://github.com/ytiurin/react-hook-layout.git
cd react-hook-layout/storybook
npm run storybook

Thông tin tải xuống:

Tác giả: ytiurin
Nguồn: https://github.com/ytiurin/react-hook-layout

Giấy phép: ISC license