This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

use-microcms-iframe

⚠️ This package is now deprecated

The use-microcms-iframe is now deprecated. From now on, the package react-microcms-extension will be used for updates and support.

use-microcms-iframe

microCMS の外部データ連携（拡張フィールド）で利用するイベントをカスタムフック化したパッケージです。

このパッケージでは、useMicroCMSIframeとuseStateMicroCMSIframeという二つのカスタムフックを提供しています。

Quick start

npm install use-microcms-iframe
# or
yarn add use-microcms-iframe

Use simple.

import { useMicroCMSIframe } from 'use-microcms-iframe'

function App() {
  const { state, post } = useMicroCMSIframe<string>()

  return (
    <input
      type="text"
      value={state?.message?.data ?? ''}
      onChange={(e) => {
        post({
          description: e.target.value,
          data: e.target.value,
        })
      }}
    />
  )
}

useMicroCMSIframe

Usage

import { useMicroCMSIframe } from 'use-microcms-iframe'

function App() {
  const { state, post } = useMicroCMSIframe<string>()

  return (
    <input
      type="text"
      value={state?.message?.data ?? ''}
      onChange={(e) => {
        post({
          description: e.target.value,
          data: e.target.value,
        })
      }}
    />
  )
}

Description

type State = {
  // ...
}

const options = {
  height: 500,
  origin: 'https://example.microcms.microcms.io',
}

const { state, post, postState } = useMicroCMSIframe<State>(options)

state

アクションタイプ MICROCMS_GET_DEFAULT_DATA で獲得した State を取り扱うことができます。

初期値の取得｜外部データ連携（拡張フィールド）

post

アクションタイプMICROCMS_POST_DATAを実行することができます。

// post {UseMicroCMSIframePost}
type UseMicroCMSIframePost = <State>(message: {
  id?: string
  title?: string
  description?: string
  imageUrl?: string
  updatedAt?: string
  data: State
}) => void

データの送信｜外部データ連携（拡張フィールド）

postState

post()を実行した際の結果を管理している State です。
アクションタイプMICROCMS_POST_DATA_SUCCESS、MICROCMS_POST_DATA_FAILUREのいずれかの情報が入ります。

// postState {MicroCMSIframePostState<State>}
export type MicroCMSIframePostState<State> =
  | PostDataSuccessMessage<State>
  | PostDataFailureMessage

export type PostDataSuccessMessage<State> = {
  id: string
  action: 'MICROCMS_POST_DATA_SUCCESS'
  message: Message<State>
}

export type PostDataFailureMessage = {
  id: string
  action: 'MICROCMS_POST_DATA_FAILURE'
  error: string
}

レスポンス｜外部データ連携（拡張フィールド）

Options

Key	Type	Default	Description
height	string | number	300	microCMS に表示する高さを指定できます。
width	string | number	'100%'	microCMS に表示する横幅を指定できます。
origin	string	MessageEvent.origin	microCMS 管理画面 URL（https://<serviceId>.microcms.microcms.io）を指定することでセキュアに通信することができます。

useStateMicroCMSIframe

useMicroCMSIframeをラップしてuseStateと同じように扱えるようにしたカスタムフックです。

Usage

import { useStateMicroCMSIframe } from 'use-microcms-iframe'

function App() {
  const [state, setState] = useStateMicroCMSIframe('')

  return (
    <input
      type="text"
      value={state}
      onChange={(e) => setState(e.target.value)}
    />
  )
}

Description

type State = {
  // ...
}

const initialState: State = {
  // ...
}

const options = {
  height: 500,
  origin: 'https://example.microcms.microcms.io',
}

const [state, setState] = useStateMicroCMSIframe<State>(initialState, options)

state, setState

useStateMicroCMSIframe内部で利用しているuseStateの戻り値をそのまま返しています。

useState ｜ React Reference

Options

Options ｜ useMicroCMSIframeに加え下記の指定が可能です。

parsePostMessageParams

アクションタイプMICROCMS_POST_DATAを実行する際の Message を整形するためのオプションです。
デフォルトでは、State の情報をdataとdescriptionに紐づけられるように設定されています。

データの送信｜外部データ連携（拡張フィールド）

example

type State = {
  id: string
  text: string
}

const initialState: State = {
  id: '',
  text: ''
}

const [state, setState] = useStateMicroCMSIframe<State>(initialState, {
  parsePostMessageParams: (data) => ({
    id: data.id
    description: data.text,
    data
  }),
})