react-face-age

React.js wrapper for Face Age to build interactive visualizations in react.

Download and Installation

Installing

npm install face-age react-face-age

or

yarn add face-age react-face-age

Usage

import ReactFaceAge from "react-face-age";

To create a basic analysis with minimal configuration, write the following:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        faceageId: '<Face Age Client Id>',
        type: 'skincare-analyzer'
      }
    }
    
  }
  
  onload (re) {
      console.log(re);
  }
  
  render() {
    return (
      <ReactFaceAge
        options={this.state.options}
        onLoad={this.onload}
      />
    )
  }
}

Options

If you want to change the global default options, you can use object options.

type

• Type: String
• Default: 'skincare'
• Options:
  • 'skincare': create a new crop box
  • 'skincare-analyze': move the canvas

Define the analysis display mode. If you set the type to skincare, only the possibility of receiving the image will be displayed, while the skincare-analyze value is entered, the image will be received and the received data will also be displayed.

access

• Type: Array
• Default: ['dark_circle', 'eye_bag', 'eye_wrinkles', 'deep_wrinkles', 'wrinkles', 'acnes', 'pores', 'pigment']

You can set it to display more limited analysis information.

showCamera

• Type: Boolean
• Default: true

You can set it to use the camera to load the image.

showUpload

• Type: Boolean
• Default: true

You can specify whether users can upload images.

showFacePoint

• Type: Boolean
• Default: true

Ability to display analysis points on the face.

Contacts

Website: getfaceage.com

Email: [e-mail]