React Component Extensions

Sau khi React mounts và khởi tạo thành công ZMP, có thể truy xuất ZMP instance, zmp-react package cung cấp một số properties hữu ích.

zmpready

Một callback function sẽ được thực thi sau khi ZMP được khởi tạo thành công. Sử dụng khi cần gọi các ZMP API với 1 đối số chứa ZMP instance đã khởi tạo. Ví dụ:

import React, { useEffect } from "react";
import { zmpready } from "zmp-framework/react";

export default () => {
  useEffect(() => {
    zmpready((zmp) => {
      zmp.dialog.alert("Component mounted");
    });
  }, []);

  // ...
};

zmp

ZMP Instance cho phép sử dụng các ZMP APIs.

Khi import và sử dụng instance cần chắc chắn rằng tại thời điểm đó ZMP instance đã được khởi tạo xong:

import { zmp } from "zmp-framework/react";

export default () => {
  const doSomething = () => {
    zmp.dialog.alert("Hello world");
  };

  // ...
};

theme

Object cung cấp thông tin xem theme hiện tại đang dùng: theme.ios, theme.md, theme.aurora.

import { theme } from "zmp-framework/react";

export default () => {
  if (theme.ios) {
    console.log("Currently active theme is iOS-theme");
  }

  // ...
};

zmproute và zmprouter

Router instance và route hiện tại được truyền thông qua props tới router components:

Các properties này chỉ được truyền khi component đựợc load với router (vd: Page, routable modals, routable tabs). Nếu muốn truy xuất tại child components, thì cần truyền xuống thông qua props từ parent component.

// nhận thông qua props
export default ({ zmproute, zmprouter }) => {
  useEffect(() => {
    console.log(zmproute.url);
  }, []);
  const navigate = () => {
    zmprouter.navigate("/some-page/");
  };
  // ...
};

zmproute là route hiện tại, object chứa các properties sau:

• url - route URL
• path - route path
• query - object chứaa route query params. Ví dụ /page/?id=5&foo=bar zmproute.query sẽ thể hiện {id: '5', foo: 'bar'}
• params - route params. Ví dụ: khai báo route /page/user/:userId/post/:postId/ path và url là /page/user/55/post/12/ thì zmproute.params sẽ thể hiện {userId: '55', postId: '12'}
• name - tên của route
• hash - route URL hash
• route - route object

zmprouter là router instance

Events

Các zmp-React components hỗ trợ events thông qua truyền các function xử lý thông qua props tương ứng.

Ví dụ <Page/> component hỗ trợ pageInit, pageBeforeIn,.. events, để xử lý các events:

export default () => {
  const onPageBeforeIn = () => {
    // các hành động cần thực hiện trước khi trang xuất hiện
  };

  const onPageInit = () => {
    // các hành động cần thực hiện khi khởi tạo trang
  };

  return (
    <Page onPageBeforeIn={onPageBeforeIn} onPageInit={onPageInit}>
      ...
    </Page>
  );
};