Kampmann-calcgateway-frontend NPM

kampmann-calcgateway-frontend

Welcome to the Kampmann CalcGateway Frontend! This package provides the frontend interface for the Kampmann CalcGateway API. For comprehensive documentation, please visit our documentation page.

Installation

npm install kampmann-calcgateway-frontend

Basic Usage

import {CalcGatewayForm, useGetUIControls} from 'kampmann-calcgateway-frontend'
import { useEffect, useState } from 'react'

//Import the styles - these are prefixed classes to avoid conflicts with your own styles
import 'kampmann-calcgateway-frontend/dist/style.css'

function App() {

  //This state is passed as a callback to the CalcGatewayForm component and will store the Request Form result
  const [result, setResult] = useState({})

  //This is the request body that will be used to fetch the UI Controls from the backend
  const reqBody = {
    ProductIds: [],
    ProductGroupIds: [51050],
    ProductFamilyIds: [],
    InterfaceI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    },
    CalculationI18n: {
      Language: RequestLanguage.DE,
      Region: RequestRegion.DE,
      UnitSystem: RequestUnitSystem.METRIC,
    }
  }

  //Log the result when it changes
  useEffect(() => {
    console.log(result)
  }, [result])

  const url = "your/custom/url" // please contact us for your custom url

  /* Fetch the UI Controls from the backend using the useGetUIControls hook
  This hook is just a simple wrapper around the fetch API
  You may use your own fetch implementation if you prefer */
  const {loading, error, data} = useGetUIControls(url, reqBody)

  if (loading) return <p>Loading...</p>;
  if (error) {
    console.error(error)
    return <p>Error :(</p>;
  }

  return (
      <CalcGatewayForm UIControls={data} callback={setResult}  />
  );
}

export default App