EditableValueView

The EditableValueView component renders the value of a single Value in a way that can be edited in a web browser, and registers a listener so that any changes to that result will cause a re-render.

EditableValueView(props: ValueProps & {
  className?: string;
  showType?: boolean;
}): ComponentReturnType

See the <EditableValueView /> demo for this component in action.

The component's props identify which Value to render based on Table Id, Row Id, 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 in an appropriate <input> tag and a button lets the user change type, if possible.

Set the showType prop to false to remove the ability for the user to see or change the Value type. They will also not be able to change the type if there is a ValuesSchema applied to the Store.

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

You can provide a custom className prop which well be used on the root of the resulting element. If omitted the element's class will be editableValue. The debugIds prop has no effect on this component.

import {EditableValueView} from 'tinybase/ui-react-dom';
import {Provider} 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 = () => <EditableValueView valueId="employees" />;

const store = createStore().setValue('employees', 3);
const app = document.createElement('div');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// ->
`
<div class="editableValue">
  <button class="number">number</button>
  <input type="number" value="3">
</div>
`;