Install the API Wrapper with npm or yarn:
npm install @frontendnetwork/veganify
You can use this library in TypeScript and JavaScript. Import it with:
import Veganify from "@frontendnetwork/veganify";
and then initialize it with one of its functions.
Please refer to the Veganify API Documentation for all error codes.
-
getProductByBarcode
: Gives out information about a product by its barcode.getProductByBarcode(barcode);
-
checkIngredientsList
: Checks ingredients. Ingredients have to be comma-seperated.checkIngredientsList(ingredientsList);
-
getPetaCrueltyFreeBrands
: Gives out a list of cruelty free brands.getPetaCrueltyFreeBrands();
import Veganify from "@frontendnetwork/veganify";
import React, { useState } from "react";
const ExampleComponent = () => {
const [barcode, setBarcode] = useState("");
const [productInfo, setProductInfo] = useState(null);
const handleBarcodeSubmit = async (e) => {
e.preventDefault();
try {
const productData = await Veganify.getProductByBarcode(barcode);
setProductInfo(productData);
} catch (error) {
console.error(error);
}
};
return (
<div>
<form onSubmit={handleBarcodeSubmit}>
<input
type="text"
value={barcode}
onChange={(e) => setBarcode(e.target.value)}
placeholder="Enter barcode"
/>
<button type="submit">Submit</button>
</form>
{productInfo && (
<div>
<h2>Product Information</h2>
<pre>{JSON.stringify(productInfo, null, 2)}</pre>
</div>
)}
</div>
);
};
export default ExampleComponent;
<template>
<div>
<form @submit.prevent="handleBarcodeSubmit">
<input type="text" v-model="barcode" placeholder="Enter barcode" />
<button type="submit">Submit</button>
</form>
<div v-if="productInfo">
<h2>Product Information</h2>
<pre>{{ productInfo }}</pre>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import Veganify from "@frontendnetwork/veganify";
export default {
setup() {
const barcode = ref("");
const productInfo = ref(null);
const handleBarcodeSubmit = async () => {
try {
const productData = await Veganify.getProductByBarcode(barcode.value);
productInfo.value = productData;
} catch (error) {
console.error(error);
}
};
return { barcode, productInfo, handleBarcodeSubmit };
},
};
</script>
You will need a bundler like Webpack or Parcel to be able to use ES6 import in the browser.
<div>
<form id="barcode-form">
<input type="text" id="barcode-input" placeholder="Enter barcode" />
<button type="submit">Submit</button>
</form>
<div id="product-info">
<h2>Product Information</h2>
<pre id="product-data"></pre>
</div>
</div>
<script type="module">
import Veganify from "@frontendnetwork/veganify";
document.getElementById("product-info").style.display = "none";
document
.getElementById("barcode-form")
.addEventListener("submit", async (e) => {
e.preventDefault();
const barcodeInput = document.getElementById("barcode-input");
const barcode = barcodeInput.value;
try {
const productData = await Veganify.getProductByBarcode(barcode);
document.getElementById("product-data").textContent = JSON.stringify(
productData,
null,
2
);
document.getElementById("product-info").style.display = "block";
} catch (error) {
console.error(error);
}
});
</script>