```js npm i spyne-pyxl-web@<version> ``` ```js import { FoodProcessing } from 'spyne-pyxl-web' import "spyne-pyxl-web/dist/index.min.css" ``` ```js <FoodProcessing apiKey="YOUR_SPYNE_API_KEY" skuName="Food Plate" /> ```
js
npm i spyne-pyxl-web@
`
`js
import { FoodProcessing } from 'spyne-pyxl-web'
import "spyne-pyxl-web/dist/index.min.css"
`
`js
apiKey="YOUR_SPYNE_API_KEY"
skuName="Food Plate"
/>
`| prop | type | default | description | required |
|---------------------|---------------------|-----------------------|--------------------------------------------------------------------------------|------------|
| apiKey | string | null | Spyne API key | true |
| externalUserId | string | null | Unique Identifier | true |
| skuName | string | SKU_timestamp_in_ms | Sku name | false |
| projectName | string | PRJ_timestamp_in_ms | Project Name | false |
| foodType | string | null | Icon to show whether food is veg or non veg
isIn:['veg','nonVeg',''] | false |
| retryCount | number | 3 | To set restrictive/non-restrictive Flow | false |
| sampleShots | arrayOf(string) | [] | Reference images of good shoots to guide the user | false |
| uploadCTA | object | null | CTA configuration {'text':'Upload Button', 'id':'spyne-upload-btn'} | false |
| onSuccess | function | null | Passes response after transforming image successfully and on submit | false |
| onFailure | function | null | Passes response after API failures or after classifier rejects an image as food | false |
| onClose | function | null | Invoked when processing modal is closed | false |
| onOpen | function | null | Invoked when processing modal contains at least 1 image | false |
| processingStepsText | object | null | Text for various steps {'uploading':'Uploading...','classifying':'Classifying...','transforming':'Transforming...'} | false |
| definedClassNames | object | null | User defined classnames {"start":{"container":"w-100 h-20","button":""},"loader":{"container":"","header":""},"modal":{"container":"","headerContainer":"","headerInnerContainer":"","header":"","subHeader":"","imageContainer":"","imageMiddleContainer":"","imageInnerContainer":"","buttonsContainer":"","buttonWrapper":"","button":""}}` | false |