Can we rename the outer +rule group button as it is and the nested +rule group button as "+nested rule group"

[kuljeet2604]

Can we rename the outer +rule group button as it is and the nested +rule group button as "+nested rule group", in order to have the segregation of outer and inner level nesting.

Basically label will be changed.

[jakeboone02]

Without thinking too much about it, I think the easiest way to do this would be a custom component. Something like this:

import {
  type ActionWithRulesAndAddersProps,
  ActionElement,
  QueryBuilder,
} from 'react-querybuilder';

const CustomAddGroup = (props: ActionWithRulesAndAddersProps) => {
  if (props.level === 0) {
    return <ActionElement {...props} />;
  }
  return <ActionElement {...props} label="+ Nested Group" />;
};

const App = () => (
  <QueryBuilder controlElements={{ addGroupAction: CustomAddGroup }} />
);

[kuljeet2604]

above solution worked for changing lable

suppose if i want to make a custom component (for both add rule and add group), can this be done?
if so, what props are required.

my custom component for both action will have a button, and a small tooltip(for user guidance, as what that particular button does).
does addGroupAction suffices our task ?

[jakeboone02]

Yeah, that should do the trick. You can use the translations prop to customize the tooltip:

import {
  type ActionWithRulesAndAddersProps,
  ActionElement,
  QueryBuilder,
} from 'react-querybuilder';

const CustomAddGroup = (props: ActionWithRulesAndAddersProps) => {
  if (props.level === 0) {
    return <ActionElement {...props} />;
  }
  return <ActionElement {...props} label="+ Nested Group" />;
};

const CustomAddRule = (props: ActionWithRulesAndAddersProps) => {
  if (props.level === 0) {
    return <ActionElement {...props} />;
  }
  return <ActionElement {...props} label="+ Nested Rule" />;
};

const App = () => (
  <QueryBuilder
    controlElements={{
      addGroupAction: CustomAddGroup, // these can be the same component
      addRuleAction: CustomAddRule, // these can be the same component
    }}
    translations: {{
      addGroup: {
        title: 'Custom "add group" tooltip here'
      },
      addRule: {
        title: 'Custom "add rule" tooltip here'
      },
    }}
  />
);