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 | |
|---|---|---|
props | ValuesProps | The props for this component. |
| returns | ComponentReturnType | A rendering of the |
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.
const store = createStore().setValue('open', true);
const App = () => (
<div>
<ValuesView store={store} separator="/" />
</div>
);
const app = document.createElement('div');
ReactDOMClient.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).
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');
ReactDOMClient.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.
const App = ({store}) => (
<Provider store={store}>
<Pane />
</Provider>
);
const Pane = () => (
<div>
<ValuesView
valueComponent={FormattedValueView}
getValueComponentProps={(valueId) => ({bold: valueId == 'open'})}
/>
</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');
ReactDOMClient.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