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.