What does IRenderFunction interface definition mean in FluentUI?

Question

I'm new to typescript and have started to working with DetailsList in Fluent UI. https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist.

I am looking into the prop onRenderRow which is of type IRenderFunction.

https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts

Here, I understand that props is of the generic type P and defaultRender is a function with props as argument and returns JSX.Element or null type. But what does parentheses around both of these mean? Is it a function type? How should an implementation of this interface look like?

(props?: P, defaultRender?: (props?: P) => JSX.Element | null)

This as a whole is also returning JSX.Element or null type.

score 3 · Accepted Answer · answered Mar 02 '22 at 09:43

This is a function with two parameters props and defaultRender.

But what does parentheses around both of these mean? Is it a function type?

Yes! Return value of that function is JSX.Element or null.

First parameter props is generic type P and the second one defaultRender is a function with one parameter props generic type P which returns JSX.Element | null.

Here you are an example how to change a background color of row:

<DetailsList
  ...
  onRenderRow={(props, defaultRender) => {
    // props and defaultRender could be undefined
    if (props && defaultRender) {
      return defaultRender({
        ...props,
        styles: {
          ...props.styles,
          root: {
            backgroundColor: '#f00',
          }
        }
      })
    }
    return null;
  }}
/>

Codepen working example.

What does IRenderFunction interface definition mean in FluentUI?

1 Answers1