Services hooks

scrolled

Called when the user is scrolling.

Arguments

• props (ScrollServiceProps): The scroll service props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  scrolled({ x, y, changed, last, delta, progress, max, direction }) {
    this.$log('Scrolling');
  }
}

Tip

See the useScroll service for more details.

resized

Called when the document has been resized.

Arguments

• props (ResizeServiceProps): The resize service props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  resized({ width, height, ratio, orientation, breakpoint, breakpoints }) {
    this.$log('Resized');
  }
}

Tip

See the useResize service for more details.

keyed

Called when the user is typing.

Arguments

• props (KeyServiceProps): The key service props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  keyed({
    event,
    direction,
    isUp,
    isDown,
    triggered,
    ENTER,
    SPACE,
    TAB,
    ESC,
    LEFT,
    UP,
    RIGHT,
    DOWN,
  }) {
    this.$log('Keyed');
  }
}

Tip

See the useKey service for more details.

moved

Called when the user is moving their cursor.

Arguments

• props (PointerServiceProps): The pointer service props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  moved({ event, isDown, x, y, changed, last, delta, progress, max }) {
    this.$log('Moved');
  }
}

Tip

See the usePointer service for more details.

ticked

Creates a render loop with requestAnimationFrame.

Arguments

• props (RafServiceProps): The raf service props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  ticked({ time }) {
    this.$log('Ticked');
  }
}

Tip

See the useRaf service for more details.

loaded

Called when the page is loaded.

Arguments

The raf service does not have any props.

Example

export default class Component extends Base {
  static config = {
    name: 'Component',
    log: true,
  };

  loaded() {
    this.$log('Loaded');
  }
}

Tip

See the useLoad service for more details.