DEV Community

Cover image for A better way to place your Cage
Colby Fayock
Colby Fayock

Posted on • Edited on

2 2

A better way to place your Cage

I'm sure you find yourself way too often copying and pasting your placecage image url from placecage.com - think about all that wasted time.

Well now there's a better way, with this usePlaceCage hook.

Github: github.com/colbyfayock/use-placecage
npm: npmjs.com/package/use-placecage
Demo: use-placecage.now.sh

Want to add Nick?

const nick = usePlaceCage(400, 300);
// You got Nic
// https://www.placecage.com/400/300
Enter fullscreen mode Exit fullscreen mode

Want to add multiple Nicks?

const nick = usePlaceCage({
  width: 300,
  height: 300,
  count: 5
});
// You got 5 Nics
// ["https://www.placecage.com/300/300", "https://www.placecage.com/300/300", "https://www.placecage.com/300/300", "https://www.placecage.com/300/300", "https://www.placecage.com/300/300"]
Enter fullscreen mode Exit fullscreen mode

Want to get weird?

usePlaceCage([
  {
    width: 100,
    height: 200,
    count: 1
  },
  {
    width: 110,
    height: 200,
    count: 1
  },
  {
    width: 120,
    height: 200,
    count: 1
  },
  {
    width: 130,
    height: 200,
    count: 1
  },
  {
    width: 140,
    height: 200,
    count: 1
  },
  {
    width: 150,
    height: 200,
    count: 1
  }
])
// You do you, but you got Nic
// [
//   ["https://www.placecage.com/100/200"],
//   ["https://www.placecage.com/110/200"],
//   ["https://www.placecage.com/120/200"],
//   ["https://www.placecage.com/130/200"],
//   ["https://www.placecage.com/140/200"],
//   ["https://www.placecage.com/150/200"]
// ]
Enter fullscreen mode Exit fullscreen mode

Enjoy! 🥳

https://github.com/colbyfayock/use-placecage

Get more content straight your inbox!

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️