TinyBase logoTinyBase β

useSetCellCallback

The useSetCellCallback primitive returns a parameterized callback that can be used to set the value of a single Cell in a Store.

useSetCellCallback<Parameter>(
  tableId: MaybeAccessor<string> | GetId<Parameter>,
  rowId: MaybeAccessor<string> | GetId<Parameter>,
  cellId: MaybeAccessor<string> | GetId<Parameter>,
  getCell: (parameter: Parameter, store: Store) => Cell | MapCell,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
  then?: (store: Store, cell: Cell | MapCell) => void,
): ParameterizedCallback<Parameter>
TypeDescription
tableIdMaybeAccessor<string> | GetId<Parameter>

The Id of the Table in the Store, or a GetId function that will return it.

rowIdMaybeAccessor<string> | GetId<Parameter>

The Id of the Row in the Table, or a GetId function that will return it.

cellIdMaybeAccessor<string> | GetId<Parameter>

The Id of the Cell in the Row to set, or a GetId function that will return it.

getCell(parameter: Parameter, store: Store) => Cell | MapCell

A function which returns the Cell value that will be used to update the Store, or a MapCell function to update it, based on the parameter the callback will receive (and which is most likely a DOM event).

storeOrStoreId?MaybeAccessor<undefined | StoreOrStoreId>

The Store to be updated: omit for the default context Store, provide an Id for a named context Store, or provide an explicit reference.

then?(store: Store, cell: Cell | MapCell) => void

A function which is called after the mutation, with a reference to the Store and the Cell value (or MapCell function) used in the update.

returnsParameterizedCallback<Parameter>

A parameterized callback for subsequent use.

This primitive is useful, for example, when creating an event handler that will mutate the data in the Store. In this case, the parameter will likely be the event, so that you can use data from it as part of the mutation.

The fourth parameter is a function which will produce the Cell object that will then be used to update the Store in the callback.

For convenience, you can optionally provide a then function which will be called just after the Store has been updated. This is a useful place to call the addCheckpoint method, for example, if you wish to add the mutation to your application's undo stack.

Example

import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useCell, useSetCellCallback} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore().setCell('pets', 'fido', 'sold', false);
  const sold = useCell('pets', 'fido', 'sold', store);
  const sell = useSetCellCallback(
    'pets',
    'fido',
    'sold',
    () => true,
    store,
  );
  sell();
  console.log(sold());
  // -> true
  dispose();
});

Since

v8.3.0