How to use react-awesome-query-builder - 10 common examples
To help you get started, we’ve selected a few react-awesome-query-builder examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ukrbublik / react-awesome-query-builder / examples / demo / config.tsx View on Github 
options: {
...BasicConfig.operators.proximity.options,
optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
optionPlaceholder: "Select words between", // placeholder for "near" selectbox
minProximity: 2,
maxProximity: 10,
defaults: {
proximity: 2
},
customProps: {}
}
};
const operators: Operators = {
...BasicConfig.operators,
// examples of overriding
between: {
...BasicConfig.operators.between,
valueLabels: [
'Value from',
'Value to'
],
textSeparators: [
'from',
'to'
],
},
proximity,
};} from 'react-awesome-query-builder';
import en_US from 'antd/lib/locale-provider/en_US';
import ru_RU from 'antd/lib/locale-provider/ru_RU';
const {
FieldSelect,
FieldDropdown,
FieldCascader,
VanillaFieldSelect,
} = Widgets;
const conjunctions: Conjunctions = {
...BasicConfig.conjunctions,
};
const proximity: OperatorProximity = {
...BasicConfig.operators.proximity,
valueLabels: [
{ label: 'Word 1', placeholder: 'Enter first word' },
{ label: 'Word 2', placeholder: 'Enter second word' },
],
textSeparators: [
//'Word 1',
//'Word 2'
],
options: {
...BasicConfig.operators.proximity.options,
optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
optionPlaceholder: "Select words between", // placeholder for "near" selectbox
minProximity: 2,
maxProximity: 10,
defaults: {import { Widgets, Operators, BasicConfig } from 'react-awesome-query-builder';
import en_US from 'antd/lib/locale-provider/en_US';
import ru_RU from 'antd/lib/locale-provider/ru_RU';
const {
FieldSelect,
FieldDropdown,
FieldCascader,
VanillaFieldSelect
} = Widgets;
const conjunctions = {
...BasicConfig.conjunctions
};
const operators = {
...BasicConfig.operators,
// examples of overriding
between: {
...BasicConfig.operators.between,
valueLabels: [
'Value from',
'Value to'
],
textSeparators: [
'from',
'to'
],
},
proximity: {
...BasicConfig.operators.proximity,
valueLabels: [
{ label: 'Word 1', placeholder: 'Enter first word' },const {
FieldSelect,
FieldDropdown,
FieldCascader,
VanillaFieldSelect
} = Widgets;
const conjunctions = {
...BasicConfig.conjunctions
};
const operators = {
...BasicConfig.operators,
// examples of overriding
between: {
...BasicConfig.operators.between,
valueLabels: [
'Value from',
'Value to'
],
textSeparators: [
'from',
'to'
],
},
proximity: {
...BasicConfig.operators.proximity,
valueLabels: [
{ label: 'Word 1', placeholder: 'Enter first word' },
{ label: 'Word 2', placeholder: 'Enter second word' },
],
textSeparators: [dateFormat: 'DD.MM.YYYY',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
func: {
...BasicConfig.widgets.func,
customProps: {
showSearch: true
}
},
};
const types = {
...BasicConfig.types,
// examples of overriding
boolean: merge(BasicConfig.types.boolean, {
widgets: {
boolean: {
widgetProps: {
hideOperator: true,
operatorInlineLabel: "is",
}
},
},
}),
};
const localeSettings = {
locale: {
short: 'ru',
full: 'ru-RU',...BasicConfig.widgets.datetime,
timeFormat: 'HH:mm',
dateFormat: 'DD.MM.YYYY',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
func: {
...BasicConfig.widgets.func,
customProps: {
showSearch: true
}
},
};
const types: Types = {
...BasicConfig.types,
// examples of overriding
boolean: merge(BasicConfig.types.boolean, {
widgets: {
boolean: {
widgetProps: {
hideOperator: true,
operatorInlineLabel: "is"
}
},
},
}),
};
const localeSettings: LocaleSettings = {
locale: {dateFormat: 'DD.MM.YYYY',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
func: {
...BasicConfig.widgets.func,
customProps: {
showSearch: true
}
},
};
const types: Types = {
...BasicConfig.types,
// examples of overriding
boolean: merge(BasicConfig.types.boolean, {
widgets: {
boolean: {
widgetProps: {
hideOperator: true,
operatorInlineLabel: "is"
}
},
},
}),
};
const localeSettings: LocaleSettings = {
locale: {
short: 'ru',
full: 'ru-RU',...BasicConfig.widgets.datetime,
timeFormat: 'HH:mm',
dateFormat: 'DD.MM.YYYY',
valueFormat: 'YYYY-MM-DD HH:mm:ss',
},
func: {
...BasicConfig.widgets.func,
customProps: {
showSearch: true
}
},
};
const types = {
...BasicConfig.types,
// examples of overriding
boolean: merge(BasicConfig.types.boolean, {
widgets: {
boolean: {
widgetProps: {
hideOperator: true,
operatorInlineLabel: "is",
}
},
},
}),
};
const localeSettings = {
locale: {...BasicConfig.operators.between,
valueLabels: [
'Value from',
'Value to'
],
textSeparators: [
'from',
'to'
],
},
proximity,
};
const widgets: Widgets = {
...BasicConfig.widgets,
// examples of overriding
text: {
...BasicConfig.widgets.text,
validateValue: (val, fieldDef) => {
return (val.length < 10);
},
},
slider: {
...BasicConfig.widgets.slider,
customProps: {
width: '300px'
}
},
rangeslider: {
...BasicConfig.widgets.rangeslider,
customProps: {...BasicConfig.operators.proximity.options,
optionLabel: "Near", // label on top of "near" selectbox (for config.settings.showLabels==true)
optionTextBefore: "Near", // label before "near" selectbox (for config.settings.showLabels==false)
optionPlaceholder: "Select words between", // placeholder for "near" selectbox
minProximity: 2,
maxProximity: 10,
defaults: {
proximity: 2
},
customProps: {}
}
},
};
const widgets = {
...BasicConfig.widgets,
// examples of overriding
text: {
...BasicConfig.widgets.text,
validateValue: (val, fieldDef) => {
return (val.length < 10);
},
},
slider: {
...BasicConfig.widgets.slider,
customProps: {
width: '300px'
}
},
rangeslider: {
...BasicConfig.widgets.rangeslider,
customProps: {react-awesome-query-builder
User-friendly query builder for React. Please migrate to new @react-awesome-query-builder/* See https://github.com/ukrbublik/react-awesome-query-builder#migration-to-600
