How to use the screenfull.onchange function in screenfull

mounted() {
      // Catch the use of the esc key to exit fullscreen
      if (fullscreenApiIsSupported) {
        ScreenFull.onchange(() => {
          this.isInFullscreen = ScreenFull.isFullscreen;
        });
      }
    },
    methods: {

// Load the editor frame
  $('#editor-frame')
    .attr('src', $('#editor-frame').attr('data-src'))
    .one('load', loadFrame);

  // Fullscreen
  $('[data-fullscreen]')
    // Hide the fullscreen button if the browser doesn't suppor it
    .prop('hidden', !Screenfull.enabled)
    // Toggle on click
    .on('click', toggleFullscreen);

  // Listen for fullscreen changes
  if(Screenfull.enabled) {
    Screenfull.onchange(updateToolbar);
  }

  // Word count
  $('[data-word-count]').on('click', toggleWordCount);

  // Zen mode
  $('[data-zen-mode]').on('click', () => toggleZenMode(!zenMode));
  $('[data-zen-theme]').on('click', function() {
    let currentTheme = $(this).attr('data-zen-theme');
    toggleZenTheme(currentTheme === 'night' ? 'day' : 'night');
  });

  // Set initial zen mode state
  if(Cookie.get('zenMode') === 'true') toggleZenMode(true);

  // Enforce slug syntax

mounted() {
    this.fullscreenIsSupported = ScreenFull.enabled && !isAndroidWebView();

    // Catch the use of the esc key to exit fullscreen
    if (this.fullscreenIsSupported) {
      ScreenFull.onchange(() => {
        this.isInFullscreen = ScreenFull.isFullscreen;
        // Just exited fullscreen
        if (!this.isInFullscreen) {
          const elementWithClass = this.$el.querySelector(NORMALIZE_FULLSCREEN_CLASS);
          if (elementWithClass) {
            elementWithClass.classList.remove(NORMALIZE_FULLSCREEN_CLASS);
          }
        }
      });
    }
  },
};

return
  }

  settings
    .map('.fullscreen')
    .skip(1)
    .skipDuplicates()
    .onValue(val => {
      if (val && !screenfull.isFullscreen) {
        screenfull.request()
      }
      if (!val && screenfull.isFullscreen) {
        screenfull.exit()
      }
    })
  screenfull.onchange(() => {
    settings.view(L.prop('fullscreen')).set(screenfull.isFullscreen)
  })
}

public componentDidMount(): void {
		this.cb = this.setGameState.bind(this);
		this.props.sink.once("gamestate", () => {
			const showLog = !!+cookie.get("joust_event_log", "0");
			if (showLog) {
				this.setState({
					isLogVisible: true,
					isLogMounted: true,
				});
			}
		});
		this.props.sink.on("gamestate", this.cb.bind(this));
		if (this.state.isFullscreenAvailable) {
			screenfull.onchange(() => {
				if (screenfull.isFullscreen) {
					this.onAttainFullscreen();
				} else {
					this.onReleaseFullscreen();
				}
			});
			screenfull.onerror(() => {
				this.setState({ fullscreenError: true });
				this.clearFullscreenErrorTimeout();
				this.fullscreenErrorTimeout = window.setTimeout(() => {
					this.setState({ fullscreenError: false });
				}, 3000);
			});
		}
		this.cardOracleCb = this.updateCardOracle.bind(this);
		this.mulliganOracleCb = this.updateMulliganOracle.bind(this);

async componentDidMount() {
    this.props.initializePresets(this.props.options);

    screenfull.onchange(this._handleFullscreenChange);
  }

componentDidMount () {
    screenfull.onchange(() => {
      this.setState({
        icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
      })
    })
  }