Services hooks

See also

For an introduction to using services in components, see the Services guide. For the service architecture overview, see Service Architecture.

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.