useStatus

Example

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

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

const Pane = () => <span>Status: {useStatus()}</span>;

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

const manager = createManager();

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

console.log(app.innerHTML);
// -> '<span>Status: 0</span>'

manager.start();

console.log(app.innerHTML);
// -> '<span>Status: 1</span>'

Since

v1.2.0