useStopCallback

Example

This example shows how to use the useStopCallback hook within a component that's nested inside a Provider. The callback is used to force-stop the Manager when the status is clicked.

import React from 'react';
import {createRoot} from 'react-dom/client';
import {createManager} from 'tinytick';
import {Provider, useStopCallback, useStatus} from 'tinytick/ui-react';

const Pane = () => {
  const handleClick = useStopCallback(true);
  return (
    <span id="span" onClick={handleClick}>
      Manager status: {useStatus()}
    </span>
  );
};

const App = ({manager}) => (
  <Provider manager={manager}>
    <Pane />
  </Provider>
);

const app = document.createElement('div');
const manager = createManager().start();
createRoot(app).render(<App manager={manager} />);
const span = app.querySelector('span');

console.log(span.innerHTML);
// -> 'Manager status: 1'

// User clicks the <span> element:
// -> span MouseEvent('click', {bubbles: true})

console.log(span.innerHTML);
// -> 'Manager status: 0'

Since

v1.2.0