TinyBase

useIndexes

The useIndexes hook is used to get a reference to an Indexes object from within a Provider component context.

useIndexes(id?: string): Indexes | undefined
TypeDescription
id?string

An optional Id for accessing an Indexes object that was named with an Id in the Provider.

returnsIndexes | undefined

A reference to the Indexes object (or `undefined` if not within a Provider context, or if the requested Indexes object does not exist)

A Provider component is used to wrap part of an application in a context. It can contain a default Indexes object (or a set of Indexes objects named by Id) that can be easily accessed without having to be passed down as props through every component.

The useIndexes hook lets you either get a reference to the default Indexes object (when called without an parameter), or one of the Indexes objects that are named by Id (when called with an Id parameter).

Examples

This example creates a Provider context into which a default Indexes object is provided. A component within it then uses the useIndexes hook to get a reference to the Indexes object again, without the need to have it passed as a prop.

const App = ({indexes}) => (
  <Provider indexes={indexes}>
    <Pane />
  </Provider>
);
const Pane = () => <span>{useIndexes().getListenerStats().sliceIds}</span>;

const indexes = createIndexes(createStore());
const app = document.createElement('div');
ReactDOM.render(<App indexes={indexes} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'

This example creates a Provider context into which an Indexes object is provided, named by Id. A component within it then uses the useIndexes hook with that Id to get a reference to the Indexes object again, without the need to have it passed as a prop.

const App = ({indexes}) => (
  <Provider indexesById={{petStore: indexes}}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <span>{useIndexes('petStore').getListenerStats().sliceIds}</span>
);

const indexes = createIndexes(createStore());
const app = document.createElement('div');
ReactDOM.render(<App indexes={indexes} />, app);
console.log(app.innerHTML);
// -> '<span>0</span>'