microcms-iframe-api v0.0.7

microcms-iframe-api

This library is for communicating with the microCMS iframe field via postMessage.

postMessage protocol is here.

This library do not depend framework (eg React, Vue.js ...).

Usage

import * as iframe from "microcms-iframe-api";

/**
 * Setup iframe field.
 */
iframe.setup({
  /**
   * This iframe will only receive messages from this origin.
   * If you specify "*", you can receive messages from all origins. (Not recommend)
   * required.
   */
  origin: "https://example.microcms.io",

  /**
   * Height of iframe field in admin page.
   * string or number. optional.
   */
  height: 200,

  /**
   * Width of iframe field in admin page.
   * string or number. optional.
   */
  width: "100%",

  /**
   * Callback when you get the initial value.
   */
  onDefaultData: (message) => console.log(message),

  /**
   * Callback when you succeed to post value.
   */
  onPostSuccess: (message) => console.log(message),

  /**
   * Callback when you failed to post value.
   */
  onPostError: (message) => console.log(message),
});

/**
 * Send data to microCMS.
 */
iframe.set(
  {
    id: "item_123456",

    /**
     * Text to be displayed on the admin page.
     * string. optional.
     */
    title: "foo",

    /**
     * Text to be displayed on the admin page.
     * string. optional.
     */
    description: "foo\nbar\n",

    /**
     * Image URL to be displayed on the admin page.
     * string. optional.
     */
    imageUrl: "http://placehold.jp/150x150.png",

    /**
     * Update time to be displayed on the admin page.
     * string or Date. optional.
     */
    updatedAt: "2022-04-26T00:27:13.176Z",

    /**
     * Any object that can be serialized to JSON.
     * This value returned by contents API.
     * required.
     */
    message: {},
  },

  /**
   * Origin passed to `iframe.set`.
   */
  "https://example.microcms.io"
);