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
Type | Description | |
---|---|---|
id? | string | An optional |
returns | Indexes | 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>'