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.

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 = {
  widgets: {
    text: {
      operators: [...BasicConfig.types.text.widgets.text.operators, "contains"]

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


Support On Demand!