useScheduledTaskRunIds

Example

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

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

const Pane = () => (
  <span>Scheduled task run Ids: {useScheduledTaskRunIds().length}</span>
);

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

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

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

console.log(app.innerHTML);
// -> '<span>Scheduled task run Ids: 0</span>'

manager.scheduleTaskRun('ping', 200);
console.log(app.innerHTML);
// -> '<span>Scheduled task run Ids: 1</span>'

manager.scheduleTaskRun('ping', 400);
console.log(app.innerHTML);
// -> '<span>Scheduled task run Ids: 2</span>'

Since

v1.2.0