Services hooks

scrolled

Called when the user is scrolling.

Arguments

• props (ScrollServiceProps): The scroll service props.

Example

import { Base } from '@studiometa/js-toolkit';

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

  scrolled(props) {
    this.$log('scrolling', props);
  }
}

Tip

See the useScroll service for more details.

resized

Called when the document has been resized.

Arguments

• props (ResizeServiceProps): The resize service props.

Example

import { Base } from '@studiometa/js-toolkit';

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

  resized(props) {
    this.$log('resized', props);
  }
}

Tip

See the useResize service for more details.

keyed

Called when the user is typing.

Arguments

• props (KeyServiceProps): The key service props.

Example

import { Base } from '@studiometa/js-toolkit';

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

  keyed(props) {
    this.$log('keyed', props);
  }
}

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

import { Base } from '@studiometa/js-toolkit';

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

  moved(props) {
    this.$log('moved', props);
  }
}

Tip

See the usePointer service for more details.

ticked

Executed on every frame with requestAnimationFrame.

Arguments

• props (RafServiceProps): The raf service props.

Example

import { Base } from '@studiometa/js-toolkit';

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

  ticked(props) {
    this.$log('ticked', props);
  }
}

Tip

See the useRaf service for more details.