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 | |
|---|---|---|
props | ValueProps | The props for this component. |
| returns | ComponentReturnType | A rendering of the |
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.
const store = createStore().setValue('open', true);
const App = () => (
<span>
<ValueView valueId="open" store={store} />
</span>
);
const app = document.createElement('div');
ReactDOMClient.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).
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');
ReactDOMClient.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.
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');
ReactDOMClient.createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span></span>'
Since
v3.0.0