`ValueView`

The ValueView component renders the value of a single Value, and registers a listener so that any changes to that result will cause a re-render.

ValueView(props: ValueProps): ComponentReturnType

Type Description

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

props

ValueProps

The props for this component.

returns

ComponentReturnType

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

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

A Value contains a string, number, or boolean, so the value is rendered directly without further decoration. You can create your own ValueView-like component to customize the way that a Value is rendered: see the ValuesView component for more details.

This component uses the useValue hook under the covers, which means that any changes to the specified Value will cause a re-render.

Examples

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

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

const store = createStore().setValue('open', true);
const App = () => (
  <span>
    <ValueView valueId="open" store={store} />
  </span>
);

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

store.setValue('open', false);
console.log(app.innerHTML);
// -> '<span>false</span>'

This example creates a Provider context into which a default Store is provided. The ValueView component within it then renders the Value (with its Id for readability).

import {Provider, ValueView} 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 = () => (
  <span>
    <ValueView valueId="open" debugIds={true} />
  </span>
);

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

This example creates a Provider context into which a default Store is provided. The ValueView component within it then attempts to render a non-existent Value.

import {Provider, ValueView} 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 = () => (
  <span>
    <ValueView valueId="website" />
  </span>
);

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

Since

v3.0.0