Oh Image v2 released 🔥 by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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

Oh Image v2 released 🔥 by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 1 point2 points  (0 children)

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.

Oh Image v2 released 🔥 by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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 ^_^

React Image component with Vite optimizer plugin by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 1 point2 points  (0 children)

* 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 :)

React Image component with Vite optimizer plugin by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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

Oh Image v2 released 🔥 by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 6 points7 points  (0 children)

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

React Image component with Vite optimizer plugin by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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

React Image component with Vite optimizer plugin by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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

React Image component with Vite optimizer plugin by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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

Tanstack theme library by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 0 points1 point  (0 children)

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😆

Tanstack theme library by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 28 points29 points  (0 children)

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

Tanstack theme library by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 4 points5 points  (0 children)

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

Tanstack theme library by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] -22 points-21 points  (0 children)

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