{"id":9090,"date":"2023-12-13T08:55:29","date_gmt":"2023-12-13T08:55:29","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9090"},"modified":"2023-12-13T08:55:29","modified_gmt":"2023-12-13T08:55:29","slug":"achieve-string-contains-operator-with-react-awesome-query-builder","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/achieve-string-contains-operator-with-react-awesome-query-builder","title":{"rendered":"How to Achieve String Contains Operator With react-awesome-query-builder For Type Text"},"content":{"rendered":"<p>This library adopts a configuration-driven approach. The config defines supported value types, operators, rendering, importing, and exporting. Refer to the <a href=\"https:\/\/github.com\/ukrbublik\/react-awesome-query-builder\/blob\/master\/CONFIG.adoc\" target=\"_blank\" rel=\"noopener\">config<\/a> for the complete documentation.<\/p>\n<p>To implement the string <strong>\u2018contains\u2019<\/strong> functionality, you can create a custom operator as shown below.<\/p>\n<p><strong>NOTE:<\/strong><br \/>\nStarting from version 6, the library has been modularized into separate <a href=\"https:\/\/github.com\/ukrbublik\/react-awesome-query-builder\/tree\/master\/packages\" target=\"_blank\" rel=\"noopener\">packages<\/a>. Therefore, if you are using a version older than 6, simply update your imports accordingly:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/\/ For versions 6 and above\r\nimport { BasicConfig } from '@react-awesome-query-builder\/ui';\r\n\r\n\/\/ For versions prior to 6\r\nimport { BasicConfig } from 'react-awesome-query-builder';\r\n<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">BasicConfig.operators.contains = {\r\n  label: \"contains\",\r\n  labelForFormat: \"contains\",\r\n  reversedOp: \"not_like\",\r\n  sqlOp: \"LIKE\",\r\n  valueSources: [\"value\"],\r\n  cardinality: 1\r\n};\r\n\r\nBasicConfig.types.text = {\r\n  ...BasicConfig.types.text,\r\n  widgets: {\r\n    ...BasicConfig.types.text.widgets,\r\n    text: {\r\n      ...BasicConfig.types.text.widgets.text,\r\n      operators: [...BasicConfig.types.text.widgets.text.operators, \"contains\"]\r\n    }\r\n  }\r\n};\r\n\r\nconst config = {\r\n  ...BasicConfig,\r\n  fields: {\r\n    name: {\r\n      label: \"Name\",\r\n      type: \"text\",\r\n      operators: [\"contains\"]\r\n    }\r\n  }\r\n};\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 \u2018contains\u2019 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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9091,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9090","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9090"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9090"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9090\/revisions"}],"predecessor-version":[{"id":9093,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9090\/revisions\/9093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9091"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}