How to define a React component to use an interchangeable context?

Question

I have the following component:

export const ActionCell = () => {
  const {
    edit,
    handleEditComplete,
    handleEditCancel,
    handleEdit,
    handleDelete,
  } = useRow();

  return (
    <StyledActionCell>
      <Group>
        {edit ? (
          <>
            <Complete onClick={handleEditComplete} />
            <Cancel onClick={handleEditCancel} />
          </>
        ) : (
          <>
            <Edit onClick={handleEdit} />
            <Delete onClick={handleDelete} />
          </>
        )}
      </Group>
    </StyledActionCell>
  );
};

I want to reuse this component across my application, but with different contexts using the same API. So all functions and variables coming from the hook would be available but the implementation of the logic in the provider is different. How would I go about implementing this?

Currently the useRow references one of the 2 contexts, so it will error when using the context which is not referenced.

Best Regards

Answer 1

You can't use different context without telling the useContext from where to take the data.

What you can do is to use same Context in different places.

const ActionContext = React.createContext()
...
return (<>
    <ActionContext.Provider value={...value1}><ActionCell /></ActionContext.Provider>
    <ActionContext.Provider value={...value2}><ActionCell /></ActionContext.Provider>
    <ActionContext.Provider value={...value3}><ActionCell /></ActionContext.Provider>
</>)

Same component, same context provider, different provided values