# Kiltel for Next.js / React (Client Only)

Kiltel is DOM-based. Use it only in client components. All rules and attributes from `README.md` remain the same.

## Install

```bash
npm i kiltel
```

## Add CSS (App Router)

Add the CSS once in `app/layout.js` or your global CSS:

```js
import 'kiltel/kiltel-next.css';
```

## Quick Start (App Router)

```jsx
'use client';
import { useKiltel } from 'kiltel/kiltel-react';

export default function Page() {
  useKiltel();

  return (
    <div className="kiltel-phone-wrap">
      <input type="tel" className="form-control" data-kilvish-tel name="phone" />
      <input type="hidden" name="country_code" />
      <input type="hidden" name="contact" />
    </div>
  );
}
```

## Pages Router / Manual Init

```jsx
import { useEffect, useRef } from 'react';
import kiltel from 'kiltel/kiltel-next';
import 'kiltel/kiltel-next.css';

export default function Page() {
  const wrapRef = useRef(null);

  useEffect(() => {
    kiltel.init({ scope: wrapRef.current });
  }, []);

  return (
    <div className="kiltel-phone-wrap" ref={wrapRef}>
      <input type="tel" className="form-control" data-kilvish-tel name="phone" />
      <input type="hidden" name="country_code" />
      <input type="hidden" name="contact" />
    </div>
  );
}
```

## Rules and Attributes

All attributes from `README.md` still apply:
- `data-kilvish-tel` (required)
- `data-kiltel-init`
- `data-kiltel-validation`
- `data-kilvish-only`
- `data-kilvish-exclude`
- `data-kilvish-preferred`

If you do not want the widget on an input, remove `data-kilvish-tel`.