test-button

how to install, import and use npm package in our application (ex: hifipay-sdk-test) here we are taking example npm package(hifipay-sdk-test) for understanding.

for using npm package(hifipay-sdk-test) in our application, follow below step by step process

step 1:- install npm package(hifipay-sdk-test) in your application using below command:

command : npm install hifipay-sdk-test after installation process completed, we can see the package as dependency in package.json file

step2:- after that we can import the package any file in our application like below:

example: import {HifiPayBtn,HifiReButton} from 'hifipay-sdk-test' above there are two components extracted from the package(hifipay-sdk-test). we can import any one component or both as per our requirement.

step 3:- after importing we can use those components in our application.

before usage we need to aware about the props that we can passing externally in the component. for example in our case there are two components(HifiPayBtn and HifiReButton)

props for HifiPayBtn => (bWidth, bHeight) for setting height and width of the button (iWidth, iHeight) for setting height and width of the iFrame

working: if you click on HifiPayBtn. it shows iFrame. this button has toggle functinality

props for HifiReButton => (bWidth, bHeight) for setting height and width of the button working: if you click on HifiReButton, it redirects the landing page opened in a new tab

step 4:- let's understand the usage of the imported components with example code

// app.js file

import React from 'react';

import {HifiPayBtn,HifiReButton} from 'hifipay-sdk-test' ;

const App = ()=>{

return(
  <div>
    <h1>usage of imported npm package components</h1>
    <HifiPayBtn bWidth={'200px'} bHeight={'50px'} iWidth={'500px'} iHeight={'600px'}   />
    <HifiReButton bWidth={'200px'} bHeight={'50px'}   />
  </div>
  )

}

export default App;