A set of web components for Open Food Facts to help build edition interfaces.

Link to documentation will be available soon. You will see the list of available components and how to use them.

npm install @openfoodfacts/openfoodfacts-webcomponents

Link : https://cdn.jsdelivr.net/npm/@openfoodfacts/openfoodfacts-webcomponents/dist/off-webcomponents.bundled.js

You can use the components via ES6 modules or via script tag. To be sure webcomponents are handled correctly, you have to import the polyfill. More details can be found in the Lit web components polyfill documentation.

npm install @webcomponents/webcomponentsjs

import "@webcomponents/webcomponentsjs/webcomponents-loader.js"
import "@openfoodfacts/openfoodfacts-webcomponents"

Then you have to copy the localization files to your project. If you use vite you can use the plugin vite-plugin-static-copy to copy the localization files to your project.

npm install vite-plugin-static-copy

import copy from "rollup-plugin-copy"
import path from "path"
export default defineConfig({
  // ...
  plugins: [
    // ...
    viteStaticCopy({
      targets: [
        {
          src: path.resolve(
            __dirname,
            "node_modules/@openfoodfacts/openfoodfacts-webcomponents/dist/localization/locales/*.js"
          ),
          dest: "assets/localization/locales",
        },
      ],
    }),
  ],
  // ...
})

<script src="<path-to-webcomponentsjs>/webcomponents-loader.js"></script>
<script
  type="module"
  src="<path-to-openfoodfacts-webcomponents>/dist/off-webcomponents.bundled.js"
></script>

Be sure to copy all the files in the dist/localization/locales folder to your project.

After importing you can use them in your HTML like this example :

<robotoff-question
  product-code="0628233671356"
  insight-types=""
  options='{"showMessage": true, "showLoading": true, "showError": true}'
/>

To use components with good configuration you have to add only one time the off-webcomponents-configuration before every components in your HTML. It has this parameters :

• robotoff-configuration : configuration for robotoff components
  • api-url : url of the robotoff api
  • img-url : url of the images of the products
  • dry-run : usefull for testing annotations without saving them, default is false. It will console.log the annotations instead of sending them to the api.
• language-code : language code of the user, default is en
• assets-images-path : path of the images in assets/images folder, default is /assets/images

The default configuration is :

<off-webcomponents-configuration
  language-code="en"
  robotoff-configuration='{
          "dryRun": false,
          "apiUrl": "https://robotoff.openfoodfacts.net/api/v1",
          "imgUrl": "https://images.openfoodfacts.net/images/products"
        }'
  assets-images-path="/assets/images"
></off-webcomponents-configuration>
<off-boolean-attribute></off-boolean-attribute>

For boolean we follow the convention of lit here Boolean is set to false by default and ca be use like this:

• true :

<off-boolean-attribute hide></off-boolean-attribute>

• false :

<off-boolean-attribute></off-boolean-attribute>