How to Achieve String Contains Operator With react-awesome-query-builder For Type Text

This library adopts a configuration-driven approach. The config defines supported value types, operators, rendering, importing, and exporting. Refer to the config for the complete documentation.

To implement the string ‘contains’ functionality, you can create a custom operator as shown below.

NOTE:
Starting from version 6, the library has been modularized into separate packages. Therefore, if you are using a version older than 6, simply update your imports accordingly:

// For versions 6 and above
import { BasicConfig } from '@react-awesome-query-builder/ui';

// For versions prior to 6
import { BasicConfig } from 'react-awesome-query-builder';

BasicConfig.operators.contains = {
  label: "contains",
  labelForFormat: "contains",
  reversedOp: "not_like",
  sqlOp: "LIKE",
  valueSources: ["value"],
  cardinality: 1
};

BasicConfig.types.text = {
  ...BasicConfig.types.text,
  widgets: {
    ...BasicConfig.types.text.widgets,
    text: {
      ...BasicConfig.types.text.widgets.text,
      operators: [...BasicConfig.types.text.widgets.text.operators, "contains"]
    }
  }
};

const config = {
  ...BasicConfig,
  fields: {
    name: {
      label: "Name",
      type: "text",
      operators: ["contains"]
    }
  }
};