react-creepyface

React-Creepyface is a React component for Creepyface.

Usage no npm install needed!

<script type="module">
  import reactCreepyface from 'https://cdn.skypack.dev/react-creepyface';
</script>

README

React-Creepyface · npm version

React-Creepyface is a React component for Creepyface.

Edit quizzical-dawn-0hzuq

Installation

npm i creepyface react-creepyface

react-creepyface uses creepyface as a peer dependency therefore both need to be installed.

Usage

import React from 'react'
import { render } from 'react-dom'
import Creepyface from 'react-creepyface'

render(
  <Creepyface
    src={`https://creepyface.io/img/0/serious`}
    options={{
      hover: `https://creepyface.io/img/0/hover`,
      looks: [
        { angle: 0, src: `https://creepyface.io/img/0/0` },
        { angle: 45, src: `https://creepyface.io/img/0/45` },
        { angle: 90, src: `https://creepyface.io/img/0/90` },
        { angle: 135, src: `https://creepyface.io/img/0/135` },
        { angle: 180, src: `https://creepyface.io/img/0/180` },
        { angle: 225, src: `https://creepyface.io/img/0/225` },
        { angle: 270, src: `https://creepyface.io/img/0/270` },
        { angle: 315, src: `https://creepyface.io/img/0/315` },
      ],
    }}
  />,
  document.getElementById('root')
)

Check out the stories for working examples.

Developing

  • yarn dev will spin up the storybook.
  • yarn build will generate the production scripts under the dist folder.