DEV Community

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

Posted on • Edited on

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)