@momentumus-react-packages/momentumus-react-packages v0.0.29

Publish Package to npm using below commands

1. yarn publish - It will auto bump version and publish
2. yarn npm:publish - It won't auto bump version

Installation

• yarn add @momentumus-react-packages/momentumus-react-packages or npm install @momentumus-react-packages/momentumus-react-packages

Components

BasicMap

import { BasicMap } from '@momentumus-react-packages/momentumus-react-packages';
const GOOGLE_MAPS_API_KEY = 'Azweuw898345ksdfjk234';

return (
  <BasicMap
    defaultPaths={[]} // This should be mandatory to avoid infinite loop
    mapApiKey={GOOGLE_MAPS_API_KEY}
    focusedCoordinates={{ lat: 17.4065, lng: 78.4772 }}
    onGetPolyPathCoordinates={(pathCoordinates) => {
      console.log('🚀 ~ App ~ data:', pathCoordinates);
      setMapDrawData(pathCoordinates);
    }}
    // resetAllPaths={resetPaths}
    mapStyles={{ height: 350 }}
    libraries={['drawing', 'places']}
  />
);

BasicPagination

import { BasicPagination } from '@momentumus-react-packages/momentumus-react-packages';

return (
  <BasicPagination
    currentPage={currentPage}
    totalPages={10}
    onPageNumberClick={(pageNumber: any) => {
      setCurrentPage(pageNumber);
    }}
    pageButtonClassName="px-2 py-1 rounded-sm"
    activePageButtonClassName="bg-red-400 px-2 py-1 rounded-sm"
    prevButtonClassName="border border-1"
    nextButtonClassName="border border-1"
    searchBoxClassName="w-24 border border-1"
  />
);

InputField

import { InputField } from '@momentumus-react-packages/momentumus-react-packages';

return (
  <div className="flex justify-center items-center h-screen bg-gray-100">
    <div className="bg-white rounded-lg shadow-md p-8 w-full max-w-md">
      <p className="text-lg font-semibold mb-4">Input Field:</p>
      <div className="rounded-lg p-4">
        <InputField placeholder="Enter text..." value={inputData} onChange={handleInputChange} disabled={disabled} className="text-black" />
      </div>

      <div className="mt-6 flex justify-center">
        <button onClick={handleDisable} className={`px-6 py-2 rounded-lg text-lg font-semibold ${inputEmpty ? 'bg-gray-400 text-gray-600' : 'bg-gray-900 text-white'}`} disabled={inputEmpty}>
          {disabled ? 'Input Enable' : 'Input Disable'}
        </button>
      </div>

      <div className="bg-gray-100 text-black mt-6 p-4 rounded-lg">
        <p className="text-black mb-2">Entered data is:</p>
        <p>{inputData}</p>
      </div>
    </div>
  </div>
);

import { InputField } from '@momentumus-react-packages/momentumus-react-packages';

<BasicButton>Hello Mister Mahesh</BasicButton>

<BasicButton
  isProcessing
  buttonWrapperStyle={{
    marginTop: 12,
    backgroundColor: 'orange',
    border: 'none',
  }}
>
  Hello Mister Mahesh
</BasicButton>


<BasicButton
  isErrorOccured
  buttonWrapperStyle={{
    marginTop: 12,
    backgroundColor: 'red',
    border: 'none',
  }}
>
  Hello Mister Mahesh
</BasicButton>