@cardscan.ai/insurance-cardscan-react/README.md

A library that makes it easy to add health insurance card scanning to any web application

# CardScan.ai: React Widget

[CardScan.ai](https://www.cardscan.ai) is the fastest way to add health insurance card scanning to your mobile or web application.

<br/>

<img src="https://cardscan-assets.s3.amazonaws.com/documentation/Card-JSON-small.jpeg" alt="drawing" width="400"/>

<br/>
<hr/>
<br/>

[CardScan.ai](https://www.cardscan.ai) has UI widgets to support scanning on [web](https://docs.cardscan.ai/ui-components/react), [mobile web](https://docs.cardscan.ai/ui-components/react), Flutter, React Native, native [iOS](https://docs.cardscan.ai/ui-components/ios) and [Android](https://docs.cardscan.ai/ui-components/android). Or use the [API](https://docs.cardscan.ai/api) to build your own implementation.

### Widget Features:  

* Smart Card Detection
* Auto & Manual Capture
* Customizable User Prompts
* Browser/Device Permission Helper
* Retrying Failed & Low-Quality Scans
* Responsive UI
* Web to Mobile Handoff

<br/>


<img src="https://cardscan-assets.s3.amazonaws.com/documentation/Web-Scan.gif" alt="drawing" width="650"/><br/>

<br>

### Basic Example:

```jsx
import React from "react";
import { render } from "react-dom";
import {CardScanView} from "@cardscan.ai/insurance-cardscan-react";

function onSuccess(card: any) {
  console.log("new card: ", card);
}

// See Authentication on where to get this token.
const token = 'JWT_TOKEN'

// Render CardScanView
render(
  <CardScanView
    live={false}
    sessionToken={token}
    onSuccess={onSuccess}
    />
  ,document.getElementById("root")
);
```

### Compatibility

- **Node Versions**: 14, 16, 18
- **React Versions**: >=17.0.2, 18.2.0+
- **Webpack Versions**: 4.x, 5.x
- **Babel Versions**: 6.x, 7.x

### Peer Dependencies

- **React**: >=17.0.2
- **React-DOM**: >=17.0.2



## Documentation
Checkout the [full docs](https://docs.cardscan.ai/) and [React Widget docs](https://docs.cardscan.ai/ui-components/react).