DEV Community

loading...
Cover image for A better way to place your Cage

A better way to place your Cage

colbyfayock profile image Colby Fayock Updated on ・1 min read

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!

Discussion (0)

pic
Editor guide