Get BentConfig of a customized component.

[mperrando]

Given a customised component created through withBentoConfig(), I need to extract the resulting BentoConfig when I use such a component.

The withBentoConfig function is hiding the resulting BentoConfig in an internal BentoConfigProvider, and I do not find a way to reach for it.

I would like to have something like

function getBentoConfig(Component: (props: Props) => JSX.Element): BentoConfig

I need this for doing some math while rendering, in this case, a Table.

[veej]

Isn't the useBentoConfig hook working in this case?

[mperrando]

Thank you @veej .

useBentoConfig works only inside the BentoConfigProvider context and is fine if I am customising something "inside" the Table (e.g. a custom cell).

I need to get the numbers from outside such context.

I am calculating the column widths of a Table (of which I have two components differently customised) and I need to access the cell padding values, each time asking those value for the component I am using.

const TableComponent = props.isTableOne ? TableOne : Table;
//....

const tableConfig = getBentoConfig(TableComponent);
//here if I call useBentoConfig(), I get the default BentoConfig, not the one that the TableComponent will be using!

const widths = doSomeColumnMath(data, tableConfig);

const columns = [
        tableColumn.text({
            headerLabel: header1,
            accessor: "c1",
            width: { custom: widths[0] },
            disableSortBy: true,
            align: "left",
        }),
        tableColumn.custom({
            headerLabel: "header2",
            accessor: "c2",
            disableSortBy: true,
            width: { custom: widths[1] },
            maxWidth: widths[1],
            align: "left",
        }),
//...
];

return (<TableComponent data={data} columns={columns} />)

[veej]

The config is passed to components via a React context, so yes, you have to be inside a Provider to get the current config, and there's currently no way to get the config applied to a component from outside.

Where does TableOne in your example come from? I suppose it's a Table component with a different config applied to it.
Since the config is defined by you, can't you just use one config or the other directly based on props.isTableOne, instead of trying to infer it from the component?

[mperrando]

In that case I would lose all the grate "nesting" of configs. It would be very good to have the very same object used inside the Provider. Furthermore, maybe some values are not customised and it would be better to get the current values.

A possibile solution would be: first, to save the piece of customisation in a constant and, second, to implement a

export function useBentoConfigWithCustomisation(config: Partial<BentoConfig>) {
  return deepmerge(useBentoConfig(), config);
}

so that it gets the BentoConfig from the current Context and applies the customisation.

But the deepmerge function implemented in Bento is not exported.

Would be a good idea for you to export something like useBentoConfigWithCustomisation() that makes the same calculations as the ones done inside the Provider?

In that way, I would only need to expose the Partial BentoConfig and get the very same BentoCOnfig used by the component.

[veej]

deepmerge comes from deepmerge-ts , with just a small configuration to avoid merging React components and arrays:

bento-design-system/packages/bento-design-system/src/BentoConfigContext.tsx

Line 13 in 52cd4af

export const deepmerge = deepmergeCustom({

[mperrando]

Yes, thank you @veej , it is not a big deal to get that piece of code out of Bento. The fact is, if I extract it now, it may diverge, in the future, from what Bento actually does to customise a component.

I was suggesting to provide a Bento official function to get a customised Bento configuration.

If you think this could not be of some use, I proceed using a copy of Bento's deepmerge.