In useOgImage() hook adds searchParams option for setting arbitrary query string vars to generated URL

[cannikin]

Found a missing feature while working on adding og:image support to Cambium:

Right now setting the width or height of an og:image will add those properties as query string variables in the URL that's generated:

http://localhost:8910/photo.png?width=1000&height=800

But you may need variables that you'll use to modify the image you generate. We need a way to also add these to the final URL:

http://localhost:8910/photo.png?brightness=0.8&contrast=1.5

Right now I'm thinking of having useOgImage() accept a single argument, which is an object containing all of the vars you want to append to the URL. This can be a simple object or an instance of URLSearchParams and we'll do the right thing:

const { url } = useOgImage({ brightness: 0.9, contrast: 1.5 })
// url => http://localhost:8910/photo.png?brightness=0.9&contrast=1.5

[dac09]

Looking good Rob, looks like the implementation in the PR is different to your description though!

I like this idea

Right now I'm thinking of having useOgImage() accept a single argument, which is an object containing all of the vars you want to append to the URL.

because even though you specify width and height, they do just come through as searchParams, I don't think there's a point in separating these. We'll just have to ask people to be aware that setting width and height will change the size of the image being generated, in addition to whatever they might use it in their component for!

[cannikin]

Yeah I was writing up my plan I forgot that it already accepted options (width, height, extension). Once I got back into the code I felt like width/height/extension were kind of "special" and so didn't want to lump them altogether with others. You may not even realize that width/height actually get added as query params behind the scenes so it felt kind of weird just mixing them together, which made of them feel like they had no special importance—having to set your query vars as a standalone searchParams key makes it very clear that this is a collection of special values that you need to pass through to the og:image component because you're going to use them for something internally. width/height are more of an implementation detail that og:image uses internally.