TinyTick logoTinyTick

Provider

The Provider component is used to wrap part of an application in a context that provides a Manager to be used by hooks and components within.

Provider(props: ProviderProps & {children: ReactNode}): ReactElement<any, any>
TypeDescription
propsProviderProps & {children: ReactNode}

The props for this component.

returnsReactElement<any, any>

A rendering of the child components.

Example

This example creates a Provider context into which a Manager is made available to the whole app.

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

const App = () => {
  const manager = useCreateManager(() => createManager().start());
  return (
    <Provider manager={manager}>
      <Pane />
    </Provider>
  );
};
const Pane = () => <span>Status: {useManager().getStatus()}</span>;

const app = document.createElement('div');
const root = createRoot(app);
root.render(<App />);
console.log(app.innerHTML);
// -> '<span>Status: 1</span>'

Since

v1.1.0