> ## Documentation Index
> Fetch the complete documentation index at: https://getfaceage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React

> Use Face Age in a React app — with the face-age SDK directly, or the react-face-age wrapper.

## Use the SDK directly (recommended)

The [`face-age`](https://www.npmjs.com/package/face-age) SDK works in React without a wrapper, and gives you every option, API method and event in the [JavaScript SDK](https://getfaceage.com/docs/developer-guides/quickstart.md).

```bash theme={null}
npm install face-age
```

```jsx theme={null}
import { useEffect } from 'react';
import FaceAge from 'face-age';

export default function SkinAnalysis() {
  useEffect(() => {
    const faceAge = new FaceAge({
      elementId: 'FaceAge-module',
      faceageId: '<Your Client ID>',
      showProducts: true,
      showRoutine: true,
    });

    faceAge.render();

    faceAge.onAddToCart((data) => {
      console.log('Add to cart:', data);
    });
  }, []);

  return <div id="FaceAge-module" />;
}
```

See [Configuration](https://getfaceage.com/docs/developer-guides/reference/configuration.md), [API reference](https://getfaceage.com/docs/developer-guides/reference/sdk-api.md) and [Events & analytics](https://getfaceage.com/docs/developer-guides/integrations/events.md).

## react-face-age wrapper

> [!WARNING]
>
> [`react-face-age`](https://www.npmjs.com/package/react-face-age) uses the earlier options shown below and doesn't expose the newer SDK features. Use the SDK directly for new projects.

```bash npm theme={null}
npm install face-age react-face-age
```

```bash yarn theme={null}
yarn add face-age react-face-age
```

```jsx theme={null}
import { Component } from 'react';
import ReactFaceAge from 'react-face-age';

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

    this.state = {
      options: {
        faceageId: '<Face Age Client Id>',
        type: 'skincare-analyzer',
      },
    };
  }

  onLoad(result) {
    console.log(result);
  }

  render() {
    return (
      <ReactFaceAge
        options={this.state.options}
        onLoad={this.onLoad}
      />
    );
  }
}
```

`onLoad` is called with the result after the analysis finishes.

### Wrapper options

**faceageId** `string` *required*

Your Face Age ID, from the **API keys** page of your business in the [panel](https://panel.getfaceage.com).

**type** `string` (default: skincare)

Display mode of the analysis:

* `skincare` — only collects the user's image.
* `skincare-analyzer` — collects the image and also displays the analysis results.

**access** `string[]`

Limit the analysis information that is displayed. Defaults to `['dark_circle', 'eye_bag', 'eye_wrinkles', 'deep_wrinkles', 'wrinkles', 'acnes', 'pores', 'pigment']`.

**showCamera** `boolean` (default: true)

Allow users to take a photo with the camera.

**showUpload** `boolean` (default: true)

Allow users to upload an image.

**showFacePoint** `boolean` (default: true)

Show the analysis points on the face.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.