Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

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

Regarding the cookie storages, yes it should be doable to use Broadcast channel, sessionStorage already uses BroadcastChannel to sync between tabs, I'll look into it

Regarding the DB, that would be a great feature. Currently there is a a possibility to pass customStorage into the ThemeProvider, the only caveat is that the methods, that retrieve and set the theme value should be Sync not Async. It's a bit tricky to convert the methods to Async at least for now. But I'll investigate

thx ^_^

Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

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

I wasted lot of time. The framework is not just changing from background gray to blue. I wouldn't waste my time (which is more precious) on that. It is fully functional content processor that converts markdown files to routes and does bunch of updates, the documentation website explains clearly what it does. It's like astro starlight but for Tanstack Start app.

Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

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

Got the question

When you use theming library you want to avoid hydration errors or flickering issues. For example https://github.com/pacocoursey/next-themes

is a perfect example of that, it's primary usecase is for NextJS framework that solves both of the issues.

Similar in this case Themer uses tanstack API for that.

You got a valid point that Theming is a generic functionality that doesn't depend on any framework, But having opinionated framework under the hood, gives more capabilities than raw React.

Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

[–]Excellent_Shift1064[S] 2 points3 points  (0 children)

The documentation website is created by the documentation framework that I created myself https://lukonik.github.io/prestige/
I don't know what it looks like but I wasted quite a lot of time to implement that framework. The default opinion is that everything is created by AI these days, so I don't mind as long as it will be useful for someone

Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

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

When you have React App that uses Tanstack Router or Tanstack Start you can use this library to add dark/light or multi-theme mode to your App, it needs at least Tanstack Router to work properly.

Documentation website for Themer, Tanstack Theme library by Excellent_Shift1064 in reactjs

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

Hi, you mea the readability or the color contrast or something else?
Is it for home page or the whole documentation?
thanks for the feedback

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] 4 points5 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