Component registry

Fabrix allows you to customize how different types of data are rendered by providing a componentRegistry prop in FabrixProvider.

This prop enables you to define which React components should be used for various GraphQL types and fields, giving you the flexibility to tailor the UI components to fit your application’s needs.

export const Providers = (props: React.PropsWithChildren) =>
  <FabrixProvider
    // ...
    componentRegistry={yourOwnCustomRegistry}
  >
    {props.children}
  </FabrixProvider>

Component types

name	description
Default	Components used when no custom component are specified. FabrixComponent always uses the default components.
Custom	Components used in replacing the corresponding default components to render. These components can be used through Directive API or the custom component builder

import { ComponentRegistry } from "@fabrix-framework/fabrix";

const yourCustomRegistry = new ComponentRegistry({
  default: {
    /*
     * Default components
     */
  },
  custom: {
    /*
     * Custom components
     */
  },
});

Component categories

Both for default and custom components, there are categories to cover different types of GraphQL queries.

Subtype is the category that breaks down the component types into more specific types. Composite is the category that is used to render the whole view of the query. Unit is the category that is used to render the each field, cell, or form field.

name	subtype	description
Fields	composite	Component type that is used to render the single query view. This should implement FieldsComponentEntry interface.
Table	composite	Component type that is used to render the collection query view. This should implement TableComponentEntry interface.
Form	composite	Component type that is used to render the mutation view. This should implement FormComponentEntry interface.
Field	unit	Component type used in Fields to render the each field.
TableCell	unit	Component type used in Table to render the each cell.
FormField	unit	Component type used in Form to render the each form field.

Examples

Here is an example to define the custom component simply to render the table component is as follows:

const customTable: TableComponentEntry = {
  type: "table",
  component: (props) => {
    const headers = props.headers.map((header) => (
      <th key={header.key}>{header.label}</th>
    ));

    return (
      <table>
        <thead>
          <tr>{headers}</tr>
        </thead>
        <tbody>
          {props.values.map((item, index) => (
            <tr key={index}>
              {props.headers.map((header) => (
                <td key={header.key}>{item[header.key] as ReactNode}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

Then, add the component to the custom component registry:

const registry = new ComponentRegistry({
  custom: {
    composite: {
      customTable,
    },
  },
});

Every component inteterface type has a different set of props that are useful in creating dynamic, abstract components.

For instance, TableComponentEntry carries over information of column types from the query given to the component. It allows you to implement a table that renders the cell differently by the column on GraphQL types.

In addition to that, using the custom component builder gives you more ad-hoc control over the custom component you create.