TinyTick logoTinyTick

useTaskRunRunning

The useTaskRunRunning hook returns a boolean indicating whether a specific task run is currently running in the Manager provided by a Provider component.

useTaskRunRunning(taskRunId: string): boolean
TypeDescription
taskRunIdstring

The Id of the task run to get information for.

returnsboolean

Whether the task run is running, or undefined if the task run Id does not exist or if called from outside an active Provider.

If the task run Id does not exist or if called from outside an active Provider, this method will return undefined.

Example

This example shows how to use the useTaskRunRunning hook within a component that's nested inside a Provider. Because the hook is reactive, a change to the task run's running status will rerender the component

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

const Pane = ({taskRunId}) => (
  <span>
    Task run running: {useTaskRunRunning(taskRunId) ? 'true' : 'false'}
  </span>
);

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

const manager = createManager();
manager.setTask('ping', async () => await fetch('https://example.org'));

const app = document.createElement('div');
const root = createRoot(app);

const taskRunId = manager.scheduleTaskRun('ping');
root.render(<App manager={manager} taskRunId={taskRunId} />);

console.log(app.innerHTML);
// -> '<span>Task run running: false</span>'

manager.start();
// ... wait 100ms for task to start running
console.log(app.innerHTML);
// -> '<span>Task run running: true</span>'

// ... wait 100ms for task to complete
console.log(app.innerHTML);
// -> '<span>Task run running: false</span>'

Since

v1.2.0