TinyBase logoTinyBase

useAddRowCallback

The useAddRowCallback hook returns a parameterized callback that can be used to create a new Row in a Store.

useAddRowCallback<Parameter>(
  tableId: string | GetId<Parameter>,
  getRow: (parameter: Parameter, store: Store) => Row,
  getRowDeps?: DependencyList,
  storeOrStoreId?: StoreOrStoreId,
  then?: (rowId: undefined | string, store: Store, row: Row) => void,
  thenDeps?: DependencyList,
  reuseRowIds?: boolean,
): ParameterizedCallback<Parameter>
TypeDescription
tableIdstring | GetId<Parameter>

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

getRow(parameter: Parameter, store: Store) => Row

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

getRowDeps?DependencyList

An optional array of dependencies for the getRow function, which, if any change, result in the regeneration of the callback. This parameter defaults to an empty array. Also use this to indicate the dependencies of a GetId function if used as the tableId argument.

storeOrStoreId?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?(rowId: undefined | string, store: Store, row: Row) => void

A function which is called after the mutation, with the new Row Id, a reference to the Store, and the Row used in the update.

thenDeps?DependencyList

An optional array of dependencies for the then function, which, if any change, result in the regeneration of the callback. This parameter defaults to an empty array.

reuseRowIds?boolean

Whether Ids should be recycled from previously deleted Row objects, defaulting to true.

returnsParameterizedCallback<Parameter>

A parameterized callback for subsequent use.

This hook 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 second parameter is a function which will produce the Row object that will then be used to update the Store in the callback.

If that function has any other dependencies, the changing of which should also cause the callback to be recreated, you can provide them in an array in the optional third parameter, just as you would for any React hook with dependencies.

For convenience, you can optionally provide a then function (with its own set of dependencies) 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.

The Store to which the callback will make the mutation (indicated by the hook's storeOrStoreId parameter) is always automatically used as a hook dependency for the callback.

The reuseRowIds parameter defaults to true, which means that if you delete a Row and then add another, the Id will be re-used - unless you delete the entire Table, in which case all Row Ids will reset. Otherwise, if you specify reuseRowIds to be false, then the Id will be a monotonically increasing string representation of an increasing integer, regardless of any you may have previously deleted.

Example

This example uses the useAddRowCallback hook to create an event handler which updates the Store when the span element is clicked.

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

const store = createStore().setRow('pets', 'nemo', {species: 'fish'});
const App = () => {
  const handleClick = useAddRowCallback(
    'pets',
    (e) => ({species: 'frog', bubbles: e.bubbles}),
    [],
    store,
    (rowId) => console.log(`Added row: ${rowId}`),
  );
  return (
    <span id="span" onClick={handleClick}>
      {JSON.stringify(useTable('pets', store))}
    </span>
  );
};

const app = document.createElement('div');
createRoot(app).render(<App />);
const span = app.querySelector('span');
console.log(span.innerHTML);
// -> '{"nemo":{"species":"fish"}}'

// User clicks the <span> element:
// -> span MouseEvent('click', {bubbles: true})
// -> 'Added row: 0'

console.log(span.innerHTML);
// -> '{"0":{"species":"frog","bubbles":true},"nemo":{"species":"fish"}}'

Since

v1.0.0