Skip to main content

Reactjs AddressAPI Framework

Address Api import in Header section​

1) First you need to include js url in your root index file head section.The URL will be shared at the time of Registration. 

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <script src="https://pataa.in/pataaweb/javascript/add-addressautofill.js"></script>
  .............
</head>

image

Integrate Address Api node on UI​

Use by adding

<add-address/>

Add reference of elements for getting events of address information. It is described in the ‘Event’ Section below.

Props​

Prop NameDescription
ApikeyThe apikey will be shared at the time of app Registration.
PartnerPartner Code specific to your business will be also shared during registration.

Functional Component​

<add-address ref={ref} apikey=’XXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXX’
 partner-code=’XXXXXXXXXXXXX’>
</add-address>

Class Component​

<add-address ref={this.setInputRef} apikey=’XXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXX’
 partner-code=’XXXXXXXXXXXXX’>
</add-address>

image

Event​

1) Functional Component:

For accessing events in functional components we need to add reference. It is used with the help of user-effect hook where we access element and add receiving events.

import { useRef, useEffect } from 'react';
function App() {
  const ref = useRef(null);
  useEffect(() => {
     const handleClick = event => {
        console.log('Event handling');
     };
     const element = ref.current;
     element.addEventListener('createPataaCode', handleClick);
     element.addEventListener('manualAddress', handleClick);
     return () => {
        element.removeEventListener('click', handleClick);
     };
  }, []);

image

2) Class Component:

For accessing we directly create reference of node and access event.

import React from 'react'
import { Route } from "react-router-dom";
class Shop extends React.Component {
   state = {
       loading: true
   }

   constructor(props) {
       super(props);
       this.callRefInput = null; 
       this.setInputRef = element => { 
         this.callRefInput = element; 
       };
   }

   componentDidMount() {
       this.callRefInput.addEventListener("createPataaCode", this.addressEvent);
       this.callRefInput.addEventListener("manualAddress", this.addressEvent);
       this.callRefInput.addEventListener("closeWindow", this.addressEvent);
   }

   componentWillUnmount() {
   }

   addressEvent = (event) => {
    // To be handle address events
   }
..