イオン反応のための新しいオーバレイフックの導入

こんにちは、友人!私たちは誰もがイオンフレームワーク6.0ベータの新機能に興奮している知っているが、それは我々がV 5で行われているわけではない!イオン反応5.6では、我々はあなたが好きかもしれないと思う我々のオーバーレイのコンポーネントを制御するための新しいセットのフックをパッケージ化.あなたが尋ねるオーバーレイは何ですか?アラート、モダール、トーストなど、現在のコンテンツを表示するコンポーネントを与える用語です.
このポストでは、あなたのアプリでこれらのコンポーネントを表示するには、新しいフックを使用する方法を行くつもりです.しかし、最初に、どのようにオーバーレイを前に動作し、いくつかの課題に遭遇する可能性があります迅速な要約を行いましょう.

オーバレイコンポーネント

オーバーレイの各々は、からエクスポートされる反応コンポーネントを持っています@ionic/react , 例えばIonAlert and IonLoading . これらのコンポーネントは、プロップと呼ばれるisOpen , どちらがオーバーレイを表示するかどうかを決定します.

<IonAlert
  isOpen={showAlert}
/>

これらの構成要素は大きいです、そして、彼らは去りません.新しいフックはどんな方法でもそれらを非難しません.しかし、それらを使用するために観察する必要がありますいくつかの儀式があります.
まず、処理する状態を管理するisOpen propは挑戦かもしれない.状態がオーバーレイが入っているコンポーネントに含まれていた場合、それはuseState ). しかし、オーバーレイを表示するアクションがアプリケーションの別の部分にあった場合は、いくつかの状態管理技術やライブラリを使用してisOpen 沿って進む.
第二に、オーバーレイのコンポーネントの各コンポーネントを提供する必要がありますonDidDismiss 反転するコールバックisOpen オーバーレイがどうにか、それ自体を却下した場合、誤って背中にプロップしてください.オーバーライドしない原因isOpen あなたのアプリが再びオーバーレイを表示しようとした場合、trueに滞在すると、あなたはtrueに設定されるだろうし、イオンは変更を検出しないため、再度表示されません.

<IonAlert
  isOpen={showAlert}
  message='Hello there friend'
  onDidDismiss={() => setShowAlert(false)}
/>

第3の課題は、コンポーネントの外部からオーバーレイを表示することが困難だったことでしたたとえば、APIリクエストが失敗したときに警告を表示したい場合.イオン角には、オーバーレイを表示するためにサービスで使用するインポート可能なコントローラインスタンスがありました.反応して、これはするのがより難しかったです.
イオン反応の新しいオーバーレイフックは、これらのすべてのシナリオで5.6の助けます.

オーバレイフック

オーバーレイフックの目標は、このプロセスを減らすために、オーバーレイの使用を行うには、これらの機能的な反応コンポーネントを書くためのより自然な感じをすることでした.
フックを開始するには、使用するオーバーレイのフックをインポートします@ionic/react 以下のように:

import { useIonAlert } from '@ionic/react'

次に、機能コンポーネントでは、フックを呼び出して、showとhideメソッドを取得しますuseState メンバーを返します.我々は、メソッドがより簡単に命名される破壊の配列メソッドを選びます:

const [showAlert, hideAlert] = useIonAlert();

Most overlays dismiss themselves when the user is done interacting with them, so you won’t need the hide method for most scenarios.

次にオーバーレイを表示するには、Showメソッドを呼び出します.

showAlert('Hello!');

ユーザーが“OK”ボタンをクリックした後、アラートは自分自身を却下します.オーバーレイが去るとき、あなたはどんな追加仕事をすることについて心配する必要はありません.
オーバーレイフックのほとんどは、それらに渡すことができるオプションがあります.より一般的なオプションを追加パラメータとして渡すことができます.たとえば、ToastのオーバーレイのShowメソッドも、その2番目のパラメータとしてトーストを表示する時間がかかります.

showToast('Hello from a toast!',  3000);

これで3秒間トーストが表示され、その後トーストは自身を解雇します.
その他のオプションは、別のパラメータの代わりにオブジェクトを渡すことで送信できます.

showToast({
  buttons: [{ text: 'hide', handler: () => hideToast() }],
  message: 'Hello, click hide to dismiss',
  onDidDismiss: () => console.log('dismissed')              
})

反応フックは、同様に他のフックで使われることができます.このため、いくつかのデータを取得する責任などの他のフックの中からオーバーレイを表示することが可能です.リクエストが失敗したときにトーストを表示する顧客を取得するためのサンプルカスタムフックです.

const useCustomer = (customerId: number) => {
  const [customer, setCustomer] = useState<Customer>();
  const [showToast] = useIonToast();
  useEffect(() => {
    fetchCustomer();
    async function fetchCustomer() {
      try {
        const response = fetch(`myapi.com/customers/${customerId}`);
        const data = await (await response).json();
        setCustomer(data);
      } catch {
        showToast({
          message: 'Oops, unable to get customer',
          color: 'warning',
          buttons: [{ icon: close }],
        });
      }
    }
  }, [customerId, showToast]);
  return customer;
};

詳しい情報

新しいフックについてもっと学ぶためにguide on using overlays in Ionic React , 使用例のオーバーレイコンポーネントのそれぞれについてドキュメントをチェックアウトします.

Action Sheet

Alert

Loading

Modal

Picker

Popover

Toast

以下のコメントでは、下記のコメントを知っている場合は、次の時間まで、ハッピーコーディングしている!