Events Hooks

You can execute a function when a specific event occurs within Static CMSD.

Supported events are:

Mounted Event

The mounted event handler fires once Static CMS is fully loaded.

CMS.registerEventListener({
  name: 'mounted',
  handler: () => {
    // your code here
  },
});

Login Event

The login event handler fires when a user logs into Static CMS.

CMS.registerEventListener({
  name: 'login',
  handler: ({ author: { login, name } }) => {
    // your code here
  },
});

Logout Event

The logout event handler fires when a user logs out of Static CMS.

CMS.registerEventListener({
  name: 'logout',
  handler: () => {
    // your code here
  },
});

Change Event

The change event handler fires when a user changes the value of a field in the editor. Event listeners for change can optionally provide collection, file and field names. They can also be used to modify the entry data.

// Listen for ALL change events
CMS.registerEventListener({
  name: 'change',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all change events in a specific collection
CMS.registerEventListener({
  name: 'change',
  collection: 'posts',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all change events in a specific file in a collection
CMS.registerEventListener({
  name: 'change',
  collection: 'settings',
  file: 'global',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all change events in a specific field in a collection
CMS.registerEventListener({
  name: 'change',
  collection: 'posts',
  // file: 'global', // You can specify a file if in a file collection
  field: 'path.to.my.field',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Alter the entry data when a specific field changes
CMS.registerEventListener({
  name: 'change',
  collection: 'posts',
  // file: 'global', // You can specify a file if in a file collection
  field: 'path.to.my.field',
  handler: ({ data, collection, field }) => {
    const currentValue = data.path.to.my.field;

    return {
      ...data,
      path: {
        ...data.path,
        to: {
          ...data.path.to,
          my: {
            ...data.path.to.my,
            field: `new${currentValue}`,
          },
        },
      },
    };
  },
});

Pre Save Event

The preSave event handler fires before the changes have been saved to your git backend, and can be used to modify the entry data.

// Listen for ALL preSave events
CMS.registerEventListener({
  name: 'preSave',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all preSave events in a specific collection
CMS.registerEventListener({
  name: 'preSave',
  collection: 'posts',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all preSave events in a specific file in a collection
CMS.registerEventListener({
  name: 'preSave',
  collection: 'settings',
  file: 'global',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Alter the entry data
CMS.registerEventListener({
  name: 'preSave',
  collection: 'posts',
  // file: 'global', // You can specify a file if in a file collection
  handler: ({ data, collection, field }) => {
    const currentValue = data.path.to.my.field;

    return {
      ...data,
      path: {
        ...data.path,
        to: {
          ...data.path.to,
          my: {
            ...data.path.to.my,
            field: `new${currentValue}`,
          },
        },
      },
    };
  },
});

Post Save Event

The postSave event handler fires after the changes have been saved to your git backend.

// Listen for ALL postSave events
CMS.registerEventListener({
  name: 'postSave',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all postSave events in a specific collection
CMS.registerEventListener({
  name: 'postSave',
  collection: 'posts',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all postSave events in a specific file in a collection
CMS.registerEventListener({
  name: 'postSave',
  collection: 'settings',
  file: 'global',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

Pre Publish Event

The prePublish event handler fires before the entry is "published", before the PR is merged into default branch.

// Listen for ALL prePublish events
CMS.registerEventListener({
  name: 'prePublish',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all prePublish events in a specific collection
CMS.registerEventListener({
  name: 'prePublish',
  collection: 'posts',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all prePublish events in a specific file in a collection
CMS.registerEventListener({
  name: 'prePublish',
  collection: 'settings',
  file: 'global',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

Post Publish Event

The postPublish event handler fires after the entry is "published", after the PR is merged into default branch.

// Listen for ALL postPublish events
CMS.registerEventListener({
  name: 'postPublish',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all postPublish events in a specific collection
CMS.registerEventListener({
  name: 'postPublish',
  collection: 'posts',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});

// Listen for all postPublish events in a specific file in a collection
CMS.registerEventListener({
  name: 'postPublish',
  collection: 'settings',
  file: 'global',
  handler: ({ data, collection, field }) => {
    // Your handler code
  },
});