`ValuesView`

The ValuesView component renders the keyed value contents of a Store, and registers a listener so that any changes to that result will cause a re-render.

ValuesView(props: ValuesProps): ComponentReturnType

Type Description

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

props

ValuesProps

The props for this component.

returns

ComponentReturnType

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

The component's props can identify which Store to render - either the default context Store, a named context Store, or an explicit reference.

This component renders a Store by iterating over its Value objects. By default these are in turn rendered with the ValueView component, but you can override this behavior by providing a valueComponent prop, a custom component of your own that will render a Value based on ValueProps. You can also pass additional props to your custom component with the getValueComponentProps callback prop.

This component uses the useValueIds hook under the covers, which means that any changes to the Values in the Store will cause a re-render.

This component uses the useValueIds hook under the covers, which means that any changes to the Store's Values will cause a re-render.

Examples

This example creates a Store outside the application, which is used in the ValuesView component by reference. A change to the data in the Store re-renders the component.

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

const store = createStore().setValue('open', true);
const App = () => (
  <div>
    <ValuesView store={store} separator="/" />
  </div>
);

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

store.setValue('employees', 3);
console.log(app.innerHTML);
// -> '<div>true/3</div>'

This example creates a Provider context into which a default Store is provided. The ValuesView component within it then renders the Values (with Ids for readability).

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const Pane = () => (
  <div>
    <ValuesView debugIds={true} />
  </div>
);

const store = createStore().setValues({open: true, employees: 3});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<div>open:{true}employees:{3}</div>'

This example creates a Provider context into which a default Store is provided. The ValuesView component within it then renders the Values with a custom Value component and a custom props callback.

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

const App = ({store}) => (
  <Provider store={store}>
    <Pane />
  </Provider>
);
const getBoldProp = (valueId) => ({bold: valueId == 'open'});
const Pane = () => (
  <div>
    <ValuesView
      valueComponent={FormattedValueView}
      getValueComponentProps={getBoldProp}
    />
  </div>
);
const FormattedValueView = ({valueId, bold}) => (
  <span>
    {bold ? <b>{valueId}</b> : valueId}
    {': '}
    <ValueView valueId={valueId} />
  </span>
);

const store = createStore().setValues({open: true, employees: 3});
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<div><span><b>open</b>: true</span><span>employees: 3</span></div>'

Since

v3.0.0