Kagami Phone Input

Kagami Phone Input to display Country flag dropdown inside a container like AgGrid

Installation

To install, you can use npm or yarn:

$ npm install kgm-phone-input
$ yarn add kgm-phone-input

Usage

In order to use, you must follow the steps below:

#### 1. Configure Kgm Phone Input
At first, you need to configure the modal at the root of your project as shown bellow

``jsx
import React from 'react'
import PhoneInput from 'kgm-phone-input'

function App() {
return (


)
}

export default App
`

$3

#### 1. Simple example
`jsx
import React from 'react'
import PhoneInput from 'kgm-phone-input'

function App() {
return (


)
}

export default App
`
#### 2. Example to use within Grid
`jsx
import { AgGridReact } from "ag-grid-react";
import PhoneInput from "kgm-phone-input";
import { useState } from "react";
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import '../../lib/style.css';

function PhoneInputRenderer(params: any) {
return (



);
}

function App() {
const [rowData] = useState([
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: true },
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: false },
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: true },
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: false },
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: true },
{ field1: "9199999888888", field2: "9199999888887", field3: "919999888886", test: false },
]);

const [columnDefs] = useState([
{ field: 'field1', cellRenderer: PhoneInputRenderer },
{ field: 'field2', cellRenderer: PhoneInputRenderer },
{ field: 'field3', cellRenderer: PhoneInputRenderer }
])
return (
<>



)
}

export default App

``