Return of the Creepy Face

On Monday, I posted an article about a fun JavaScript plugin - Creepy Face - which I implemented onto my experiments page with much enjoyment. Well, someone from the creepyface.io social media team got in touch to let me know they had a React version of the plugin ready to try.

I’m pleased to say that React-Creepyface works just as well as it’s origin, in fact it was even easier to setup without having to worry about react state management, useEffect and things like that. If you’re using it in Gatsby you just pull some images into the page with a static graphql query, then add your component like so:

<Creepyface
  style={{ width: 300 }}
  src={data.imageHover.childImageSharp.fixed.src}
  options={{
    hover: data.imageHover.childImageSharp.fixed.src,
    looks: [
      { angle: 0, src: data.imageAngle0.childImageSharp.fixed.src },
      { angle: 45, src: data.imageAngle45.childImageSharp.fixed.src },
      { angle: 90, src: data.imageAngle90.childImageSharp.fixed.src },
      { angle: 135, src: data.imageAngle135.childImageSharp.fixed.src },
      { angle: 180, src: data.imageAngle180.childImageSharp.fixed.src },
      { angle: 225, src: data.imageAngle225.childImageSharp.fixed.src },
      { angle: 270, src: data.imageAngle270.childImageSharp.fixed.src },
      { angle: 315, src: data.imageAngle315.childImageSharp.fixed.src }
    ]
  }}
/>

And there you have it, another creepy face added to my experiments page! Thanks again to the people at creepyface.io for letting me know about this update.