Events Hooks

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

Supported events are:

Name	Description
mounted	Event fires once Static CMS is fully loaded
login	Event fires when a user logs into Static CMS
logout	Event fires when a user logs out of Static CMS
change	Event fires when a user changes the value of a field in the editor
preSave	Event fires before the changes have been saved to your git backend
postSave	Event fires after the changes have been saved to your git backend
prePublish	Editorial Workflow ONLY. Event fires before the entry is “published”, before the PR is merged into default branch
postPublish	Editorial Workflow ONLY. Event fires after the entry is “published”, after the PR is merged into default branch

Mounted Event

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

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

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

Editorial Workflow ONLY

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

Editorial Workflow ONLY

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

docs