# Integrate Ante using React

The Ante widget has been published as an npm package:

{% embed url="<https://www.npmjs.com/package/@antefinance/ante-widget-react>" %}

### Install ante-widget-react

**npm:** `npm i @antefinance/ante-widget-react`

**yarn:** `yarn add @antefinance/ante-widget-react`

### Build

```
npm i
npm run build
```

### Using AnteWidget

Import `AnteWidget` from the `ante-widget-react` package:

<pre class="language-typescript"><code class="lang-typescript"><strong>import AnteWidget from '@antefinance/ante-widget-react';
</strong>import '@antefinance/ante-widget/dist/widget.css'; // This will import the styles
</code></pre>

Then add the appropriate `AnteWidget` component where desired on your app:

```typescript
function Example() {
  ...
  return (
    <div>
      // To show the overall trust tier of a protocol
      <AnteWidget.Protocol name='PROTOCOL_NAME' />
      
      // To show the trust score on a specific Ante Test
      <AnteWidget.Test address='ANTE_TEST_ADDRESS' chain='0x1' />
    </div>
  );
}
```

{% hint style="warning" %}
Note: the protocol name string is case sensitive. If in doubt, check how the protocol name is spelled in the Ante app. Chain IDs can be looked up at <https://chainlist.org/>.
{% endhint %}

### Example of usage

The following code will generate badges for the Ante protocol as well as one of the Ante Tests that tests the ante protocol:

```
<AnteWidget.Protocol name='Ante' />
<AnteWidget.Test address='0x2EdC35B39BFBca6A52eA35612C2684D3D7654763' chain='0x1'>
```

<img src="https://3623970277-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaBhLPQtzmPqzNtEpO8%2Fuploads%2FgkWhSm68ai2Aa7SbdN1c%2Fante-protocol-badge-example%402x.png?alt=media&#x26;token=dcf7642d-3169-4cd8-b477-cc1bb6c0bd7f" alt="" data-size="original">![](https://3623970277-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaBhLPQtzmPqzNtEpO8%2Fuploads%2Fivvz2DJ1fkSd0KzXSpis%2Fante-test-badge-example%402x.png?alt=media\&token=f3e25acf-c298-4490-a119-85163c131dad)