TinyTick logoTinyTick

useManager

The useManager hook returns the Manager provided by the a Provider component.

useManager(): Manager | undefined
returnsManager | undefined

The current Manager, or undefined if called from outside an active Provider.

Example

This example shows how to use the useManager hook within a component that's nested inside a Provider.

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

const Pane = () => {
  const manager = useManager();
  return <div>Status: {manager ? manager.getStatus() : 'unknown'}</div>;
};

const App = () => {
  const manager = createManager().start();
  return (
    <Provider manager={manager}>
      <Pane />
    </Provider>
  );
};

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

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

Since

v1.1.0