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
TypeScript icon, indicating that this package has built-in type declarations

0.4.3 • Public • Published

⚠️ 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

npm version License: MIT

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

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

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_SUCCESSMICROCMS_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 の情報をdatadescriptionに紐づけられるように設定されています。

データの送信|外部データ連携(拡張フィールド)

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
  }),
})

Package Sidebar

Install

npm i use-microcms-iframe

Weekly Downloads

28

Version

0.4.3

License

MIT

Unpacked Size

16.7 kB

Total Files

12

Last publish

Collaborators

  • tsuki-lab