`IndexView`

The IndexView component renders the contents of a Index, and registers a listener so that any changes to that result will cause a re-render.

IndexView(props: IndexProps): ComponentReturnType

Type Description

	Type	Description
`props`	`IndexProps`	The props for this component.
returns	`ComponentReturnType`	A rendering of the `Index`, or nothing, if not present.

props

IndexProps

The props for this component.

returns

ComponentReturnType

A rendering of the Index, or nothing, if not present.

The component's props identify which Index to render based on Index Id, and Indexes object (which is either the default context Indexes object, a named context Indexes object, or an explicit reference).

This component renders a Index by iterating over its Slice objects. By default these are in turn rendered with the SliceView component, but you can override this behavior by providing a sliceComponent prop, a custom component of your own that will render a Slice based on SliceProps. You can also pass additional props to your custom component with the getSliceComponentProps callback prop.

This component uses the useSliceIds hook under the covers, which means that any changes to the structure of the Index will cause a re-render.

Examples

This example creates an Indexes object outside the application, which is used in the IndexView component by reference. A change to the Slice Ids re-renders the component.

import {createIndexes, createStore} from 'tinybase';
import {IndexView} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';

const store = createStore().setTable('pets', {
  fido: {species: 'dog'},
  felix: {species: 'cat'},
});
const indexes = createIndexes(store);
indexes.setIndexDefinition('bySpecies', 'pets', 'species');
const App = () => (
  <div>
    <IndexView indexId="bySpecies" indexes={indexes} separator="/" />
  </div>
);

const app = document.createElement('div');
createRoot(app).render(<App />);
console.log(app.innerHTML);
// -> '<div>dog/cat</div>'

store.setRow('pets', 'lowly', {species: 'worm'});
console.log(app.innerHTML);
// -> '<div>dog/cat/worm</div>'

This example creates a Provider context into which a default Indexes object is provided. The IndexView component within it then renders the Index (with Ids for readability).

import {IndexView, Provider} from 'tinybase/ui-react';
import {createIndexes, createStore} from 'tinybase';
import React from 'react';
import {createRoot} from 'react-dom/client';

const App = ({indexes}) => (
  <Provider indexes={indexes}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <IndexView indexId="bySpecies" debugIds={true} />
  </div>
);

const store = createStore().setTable('pets', {
  fido: {species: 'dog'},
  cujo: {species: 'dog'},
});
const indexes = createIndexes(store);
indexes.setIndexDefinition('bySpecies', 'pets', 'species');

const app = document.createElement('div');
createRoot(app).render(<App indexes={indexes} />);
console.log(app.innerHTML);
// -> '<div>bySpecies:{dog:{fido:{species:{dog}}cujo:{species:{dog}}}}</div>'

This example creates a Provider context into which a default Indexes object is provided. The IndexView component within it then renders the Index with a custom Slice component and a custom props callback.

import {IndexView, Provider, SliceView} from 'tinybase/ui-react';
import {createIndexes, createStore} from 'tinybase';
import React from 'react';
import {createRoot} from 'react-dom/client';

const App = ({indexes}) => (
  <Provider indexes={indexes}>
    <Pane />
  </Provider>
);
const getBoldProp = (sliceId) => ({bold: sliceId == 'dog'});
const Pane = () => (
  <div>
    <IndexView
      indexId="bySpecies"
      sliceComponent={FormattedSliceView}
      getSliceComponentProps={getBoldProp}
    />
  </div>
);
const FormattedSliceView = ({indexId, sliceId, bold}) => (
  <span>
    {bold ? <b>{sliceId}</b> : sliceId}
    {': '}
    <SliceView indexId={indexId} sliceId={sliceId} separator="/" />
  </span>
);

const store = createStore().setTable('pets', {
  fido: {species: 'dog'},
  felix: {species: 'cat'},
  cujo: {species: 'dog'},
});
const indexes = createIndexes(store);
indexes.setIndexDefinition('bySpecies', 'pets', 'species');

const app = document.createElement('div');
createRoot(app).render(<App indexes={indexes} />);
console.log(app.innerHTML);
// -> '<div><span><b>dog</b>: dog/dog</span><span>cat: cat</span></div>'

Since

v1.0.0