react-js-cron icon indicating copy to clipboard operation
react-js-cron copied to clipboard

Make the component work with any UI library

Open robincsamuel opened this issue 3 years ago • 11 comments

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!

robincsamuel avatar Jun 12 '21 07:06 robincsamuel

+1

fabianTMC avatar Aug 04 '21 09:08 fabianTMC

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.

xrutayisire avatar Sep 05 '21 00:09 xrutayisire

@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?

Dalion avatar Jan 11 '22 09:01 Dalion

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!

xrutayisire avatar Jan 13 '22 15:01 xrutayisire

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

robincsamuel avatar Jan 13 '22 15:01 robincsamuel

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

xrutayisire avatar Jan 13 '22 16:01 xrutayisire

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)

jdthorpe avatar Mar 06 '22 17:03 jdthorpe

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 avatar Sep 08 '22 10:09 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

jfroffice avatar Sep 08 '22 12:09 jfroffice

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

xrutayisire avatar Sep 08 '22 13:09 xrutayisire

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

reikrom avatar Feb 23 '23 10:02 reikrom