How to provide a custom UI for this library ? (Inspired by Tailwind)

[Aarbel]

Hi, thanks a lot for all your work on this library ?

What is the process to customize the UI ?

My goal is the achieve exactly this kind of UIs (inspired by tailwind):

Thanks a lot for your help !

[ukrbublik]

Hi.
Please take a look on this notes:
https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONTRIBUTING.md#other-ui-frameworks

Example PR to add support of new UI framework: #727

[Aarbel]

Thanks @ukrbublik.

For now, do you think i can use an existing style template, and force this behavior ? Do you also think we can make custom selects (like the ones in the screens)

Thanks for your your help

[ukrbublik]

For now, do you think i can use an existing style template, and force this behavior ?

Yes.

Do you also think we can make custom selects (like the ones in the screens)

I haven't worked with Tailwind. If you can make custom selects, it should be easy to integrate them into this library.

I see one potentially complex UI task - to make custom "And"/"Or" select and customize lines between rules

[Aarbel]

@ukrbublik

Do you also think we can make custom selects (like the ones in the screens)

Providing a custom React "Select" component as props of could be a solution, is there a "hack" like that ?

[ukrbublik]

Something like that.
For widgets you can provide own component under facrory:

react-awesome-query-builder/packages/fluent/modules/config/index.jsx

Line 43 in 0daf399

factory: (props, {RCE, W: {FluentUISelectWidget}}) => RCE(FluentUISelectWidget, props),

Also there are render* options in config for common components like render field select, operator select:

react-awesome-query-builder/packages/fluent/modules/config/index.jsx

Line 9 in 0daf399

renderField: (props, {RCE, W: {FluentUIFieldSelect}}) => RCE(FluentUIFieldSelect, props),

https://github.com/ukrbublik/react-awesome-query-builder/blob/master/packages/fluent/modules/widgets/value/FluentUISelect.jsx

[Aarbel]

Thanks a lot @ukrbublik

Having the possibility to customise the AND/OR buttons and the lines as widgets, will be a must !