React Usage

React Setup

We provide an export of React-specific components that can be utilized like any other React component in your project.

import * as React from "react";
import { ShippingInsuranceComponent } from "@vertical-insure/web-components/react";

const App = () => {
  return (
    <ShippingInsuranceComponent
      client-id={clientId}
      declared-value={declaredValue}
      courier-id={courierId}
      tracking-number={trackingNumber}
      shipment-date={shipmentDate}
      offerStateChange={(e) => console.log(e)}
    />
  )
}

Memoization

Optionally, for perfomance and for making sure the Web Component is not over-reactive, we also recommend using React's useMemo when using our Web Components:

const App = () => {
  const si = useMemo(() => {
    return (
      <ShippingInsuranceComponent
        client-id={clientId}
        declared-value={declaredValue}
        courier-id={courierId}
        tracking-number={trackingNumber}
        shipment-date={shipmentDate}
        offerStateChange={(e) => console.log(e)}
      />
    );
  }, [
    courierId,
    trackingNumber,
    customerClientSecret,
    customerForm,
    declaredValue,
    shipmentDate,
  ]);

  // Then you can call it inside your JSX:

  return (
    {si}
  )
}

Webpack configuration

If you are using Webpack, you may need to install the css-loader and the file-loader.

npm install css-loader file-loader

You can then add them to your Webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/i,
        use: ["css-loader"],
      },
    ],
  },
};