`useDelTableCallback`

The useDelTableCallback hook returns a parameterized callback that can be used to remove a single Table from a Store.

useDelTableCallback<Parameter>(
  tableId: string | GetId<Parameter>,
  storeOrStoreId?: StoreOrStoreId,
  then?: (store: Store) => void,
  thenDeps?: DependencyList,
): ParameterizedCallback<Parameter>

	Type	Description
`tableId`	`string \| GetId<Parameter>`	The `Id` of the `Table` in the `Store` to delete, or a `GetId` function that will return it.
`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?`	`(store: Store) => void`	A function which is called after the deletion, with a reference to the `Store`.
`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. Also use this to indicate the dependencies of an `GetId` function if used as the tableId argument.
returns	`ParameterizedCallback<Parameter>`	A parameterized callback for subsequent use.

This hook is useful, for example, when creating an event handler that will delete 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 deletion.

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 deletion to your application's undo stack.

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

Example

This example uses the useDelTableCallback hook to create an event handler which deletes from the Store when the span element is clicked.

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

const store = createStore().setTables({pets: {nemo: {species: 'fish'}}});
const App = () => {
  const handleClick = useDelTableCallback('pets', store, () =>
    console.log('Deleted'),
  );
  return (
    <span id="span" onClick={handleClick}>
      {JSON.stringify(useTables(store))}
    </span>
  );
};

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

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

console.log(span.innerHTML);
// -> '{}'

Since

v1.0.0