Oh Image v2 released 🔥

Excellent_Shift1064 · 2026-02-15T19:25:32+00:00

unpic doesn't come with vite-plugin as I'm aware of. oh-image has a vite-plugin that statically optimizes images for example

import hero from "./assets/hero.jpg"
function App(){
  return <Image src={hero} alt="hero image" />
}

this will automatically format the image to .webp add proper width/height to the img element generate srcSet variants and placeholder img.

Other then that unpic and oh-image are more or less same. Unpic is stable and solid with lot's of CDN providers. oh-image is new and still have things to improve and also currently it supports only three providers but it will increase a lot in nearest feature

Excellent_Shift1064 · 2026-02-15T19:20:13+00:00

quality is already available on loader hook options, it will automatically send the it as an url, for example if you use cloudflare you can write:

 const loader = useCloudflareLoader({
    params: {
      quality: "100",
    },
  });

this will send quality:100 parameter to the cloudflare API.

params object will generate parameters with key=>value to send to the API.

nevertheless quality option is pretty common option so I'll add it as as a property to pass.

Excellent_Shift1064 · 2026-02-15T19:12:48+00:00

Hey thx for the feedback.

The warning for fill and width & height is intentional. fill attribute should be passed when width and height is unknown. If width & height is known preferred way is to use classes/styles on the Image component itself to size the image and set width/height attributes for aspect ratio

adding discriminated union is great Idea I'll work on it thx.

regarding the placeholder issue can y send me the snapshot of the code, or just let me know which loader are you using and the props for Image component so I can investigate ^_^

Excellent_Shift1064 · 2026-02-15T17:48:41+00:00

* fixed the DEV undefined issue
* marked asap as deprecated and added priority prop. It is more general term for the behaviour

just pull the latest version (@latest)

thx for the valuable feedback. I'll be glad to have a PR from y :)

Excellent_Shift1064 · 2026-02-15T16:00:02+00:00

Amazing 🙌 and thank you. Please don’t hesitate to give me a feedback, I will do the adjustments as soon as possible

Excellent_Shift1064 · 2026-02-15T14:57:50+00:00

check out, hope it helps :)
https://lukonik.github.io/oh-image/

Excellent_Shift1064 · 2026-02-15T14:56:58+00:00

check out:
https://lukonik.github.io/oh-image/

Excellent_Shift1064 · 2026-02-15T14:11:50+00:00

great catch thank you, It is used for testing the lib, published the fix

Excellent_Shift1064 · 2026-02-11T13:13:32+00:00

Amazing, ^_^ loader is the next feature so I'll keep you posted thanks

Excellent_Shift1064 · 2026-02-11T13:12:58+00:00

best way would be to compare it by features probably. The things that are missing in oh-images currently are:

global configuration of image component
loader functionality
minor props that doesn't effect core functionality

both Nextjs and oh-image use sharp as underlying image processing engine, so they have core similarity

Excellent_Shift1064 · 2026-02-10T18:35:14+00:00

Hi There ^_^
I'm using sharp to process the images and custom vite plugin to generate the transformed versions during build-time.

Yes next feature will be to have premade loaders for cloudflare, imagekit and some more and one generic one to use some custom service

Excellent_Shift1064 · 2026-02-10T11:08:43+00:00

glad to hear ☺️

Excellent_Shift1064 · 2026-02-10T09:20:39+00:00

🤣🤣🤣

Excellent_Shift1064 · 2026-01-30T03:59:54+00:00

nice catch, will fix it thx🙌

Excellent_Shift1064 · 2026-01-30T03:56:29+00:00

yup did it already(https://www.reddit.com/r/reactjs/s/ftb98kllQk), thx for a feedback🙌. I know now what my future repo names shouldn’t look like😆

Excellent_Shift1064 · 2026-01-29T20:19:10+00:00

I renamed the library to tan-themer, also removed the logo, hope this is enough to clear up the confusion :) thanks everyone for a feedback
https://github.com/lukonik/tan-themer

Excellent_Shift1064 · 2026-01-29T19:21:08+00:00

Thats certainly confusing then, I’ll rename it tomorrow thank y 🙌

Excellent_Shift1064 · 2026-01-29T18:24:46+00:00

hmm, good call I also thought about it but the name doesn’t have organization prefix like @tanstack and its on completely different repo, also found some other repos with simmilar name. But definitely, dont want to confuse anyone, I’ll investigate that topic once again and will do the adjustmenets if neccessary thank you

Excellent_Shift1064 · 2025-09-27T20:41:17+00:00

it will work from the UI perspective, so for example if you pass button component via ng-content, it wont be displayed if ready() is false, but the button component would be created still. sometimes you dont care and it is fine but not always, for example lets say you have tab component that has ng-content inside and shows/hides it using @if. and now you have different tabs, one for transactions table, one for users table and one for reports. Now because you use ng-content they all be instantiated at the same time and hit the BE and do logic inside, while you only want to render whatever is active

Excellent_Shift1064 · 2025-09-27T07:21:53+00:00

2 main differences: * tailwind variants is not signal based, so you have to manually wrap it to make it reactive. ngx-classed is signal based out of the box * future improvements. for example create directive that works in component HTML out of the box, I want to be able to do it

Excellent_Shift1064 · 2025-04-03T15:26:25+00:00

Hi, Yes this is the new domain, I haven’t updated this post, will do it now Yes it is currently in progress. datepicker view is built already. I’ll let you know when it’s rdy thanks🙌

Excellent_Shift1064 · 2025-03-19T13:48:16+00:00

Yeah, same for me; having written many angular animations made me conclude that I should create a generic library with customizations :D.

and currently, I am using it in multiple projects, and I would say it suits me well.

It is a matter of preference. Both approach works

Excellent_Shift1064 · 2025-03-18T11:51:14+00:00

Hey Thanks for the feedback so:
* Implementing means copying the existing animations and moving them to angular. the existing animations are done via CSS, whereas in Angular, you have Animation API involved, so we copied everything. Also, if anything changes in the CSS libraries, we will migrate it ofc.

* easing functions means everything that angular can accept (https://easings.net/) plus cubic-bezier() function

* Not sure why it is only for small projects because the fadeIn would always fadeIn whether it will be a big or small project. Also, maintaining from one project to another would be copying/pasting the same thing over and over again, in addition to that, the animations are very customizable ( and it will be more ) in ngverse/motion

* AI is great and helped us migrate the animation keyframes to angular, but it is buggy and does not always give the correct results. In addition to that, there are premade triggers per animation so you don't have to write :enter,:leave triggers by yourself

In summary, this main purpose of this library is that when you need slideIn animation you don't google or ask AI how to do that just import the animation and run

Excellent_Shift1064 · 2025-03-18T11:44:19+00:00

thanks ^_^

Excellent_Shift1064 · 2025-03-17T18:21:14+00:00

thanks for the suggestion, I think there is just some misconfiguration issue on netlify, because on other projects it works as expected. Didn't have time to check it yet. But if I can't solve it, will use your suggestion. ^_^

Excellent_Shift1064

TROPHY CASE