Make the component work with any UI library

[robincsamuel]

Is your feature request related to a problem? Please describe. This is the best cron generator I've found, but my project uses material UI. I think it'd be great if it can work without antd.

Describe the solution you'd like We could modify it to pass in the Button component & the Select component. Or maybe, carve out the core logic so that one can use it even without using the default UI and by just passing in the required props.

I'd be happy to contribute once we figure out a plan.

Thank you so much for this library!

[fabianTMC]

+1

[xrutayisire]

Hi, sorry for the late (late) answer.

Thank you very much, I appreciate that you like this component. I also think it can be a great improvement to let anyone used this component without Ant Design. I just didn't take the time (yet) to do this.

I think I will take a look to see what's possible, maybe even not using a UI library at all with plain CSS, so everyone can use it. I just don't want to lose any features. Anyway, It can really help to do that because today this component depends a lot on antd. When they make breaking changes, it can break the component.

I will try to keep you posted if I make any development on my side.

[Dalion]

@xrutayisire Hi! Thanks a lot for this cron lib, but it seems like it's time to do something with using antd :)

According to this thread, antd does not works properly with react 18 and I can't see any activity of antd team to fix this. So your library doesn't works with react 18 too.

Is there any chance to get rid of antd?

[xrutayisire]

Hi!

Thanks for your comment, I didn't know about React 18 crash. I will check and see if it's still working on my side. Btw I think I just deactivated StrictMode.

And to get rid of antd it requires a lot of work to keep the same UI. I wanted to start the dev, but I didn't have the time. If someone is interested to help me on this, it will be quicker!

[robincsamuel]

@xrutayisire I'd be happy to assist you. Let's plan and start the development.

[xrutayisire]

I just emailed you, so we can plan a call together.

[jdthorpe]

For what it's worth, as in interim solution, I copied the antd.css file out of the /node_modules/antd/dist/ folder and into my project directory, deleted the first few hundred lines of global styles (that previously clobbered all the styles on my site) from that file, and imported that trimmed down antd.css file. The cron widget is a bit uglier (b/c it depends on some of the antd global styles like button {...}, but its still the best cron widget I could find (and doesn't change every button, paragraph, title, etc. on my site)

[jfroffice]

Any chance to get only the minimal style to use the component ?

It adds like 550kb of CSS to use it.

The component might be called react-antd-js-cron, at runtime it depends on antd/lib/button.

[jfroffice]

I have a workaround for the CSS, you only need to grab lib/select/index.css and lib/style/default.css and you can deleted the first few hundred lines of global styles.

It drops to 50kb

[xrutayisire]

Yes it is because of antd, not the style from this library. So it cannot be done from the lib.

[reikrom]

maybe, https://blog.bitsrc.io/how-to-install-a-single-component-from-any-ui-library-8d0519544d7b